PHP와 자바 스크립트를 사용하여 데이터베이스에서 마커 및 정보 창 삽입 (Google지도)

Question

내 목표는 데이터베이스의 테이블에서 데이터를 가져 와서지도에 표시하는 것입니다. 내 테이블에 LATITUD (latitude 저장) (type = float (10,6)), LONGITUD (longitude 저장) (type = float 10,6) 및 ASUNTO (정보 저장) (type = VARCHAR)의 세 열이 있습니다. 처음 두 개는 마커의 위치 정보를 가지고, 세 번째 열은 마커와 관련된 정보를 저장합니다. 이 마지막 열의 내용은 정보 창과 함께 보여주고 싶은 내용입니다.

페이지의 본문 요소 내부에서이를 수행하려면지도를 만들고 관련된 모든 정보를로드하는 데 사용하는 스크립트 요소 (자바 스크립트)를 삽입하기로 결정했습니다.

이 자바 스크립트 코드 안에는 연관 배열의 시작점에서 언급 한 테이블의 내용을 얻기 위해 데이터베이스에 쿼리하는 PHP 코드가 포함되어 있습니다. 이 코드에서는 while 루프를 통해 모든 마커를 해당 정보창과 함께로드하려고합니다.

마커를로드해도로드 코드를로드하는 데 아무런 문제가 없었습니다.

while ($row = $resultado->fetch(PDO::FETCH_ASSOC)) { 
       echo ' var myLatlng1 = new google.maps.LatLng('. 
       $row['LATITUD'].', '.$row['LONGITUD'].'); 
       var marker1 = new google.maps.Marker({ 
       position: myLatlng1, 
       map: map, 
       });'; 
} 

PHP 스크립트 안에이 코드를 삽입하고 잘 작동합니다. 나는 "ASUNTO"열에 저장된 정보가 들어있는 각 마커에 대한 정보 창을 추가하려고 할 때 문제가 있습니다. 위의 코드를 수정하여 정보 창을 추가하면 문제가 발생합니다. 나에게 문제가되는 코드는 아래에있다.

while ($row = $resultado->fetch(PDO::FETCH_ASSOC)) { 
       echo ' var asunto = '. $row['ASUNTO'] . ';'; 
       echo ' var myLatlng1 = new google.maps.LatLng('. 
       $row['LATITUD'].', '.$row['LONGITUD'].'); 
       var marker1 = new google.maps.Marker({ 
       position: myLatlng1, 
       map: map, 
       }); 



       var infowindow = new google.maps.InfoWindow({ 
       content: asunto 
       }); 


       infowindow.open(map, marker1); 


       '; 
     } 

내가 문제가되는 코드 라인은 루프 내부의 첫 번째 코드 라인이라고 생각합니다. 아래에서 살펴 보겠습니다. 내가 PHP를 통해 얻은되지 않고 직접 삽입되어 나에게 문제를 제공하지 않고 정보 창을 표시하는 문자열의 내용을 변경할 때이 변수를 "정보창"때문에

echo ' var asunto = '. $row['ASUNTO'] . ';'; 

내가 믿을 이유는있다 "open"메서드를 사용하여 호출 할 때. 아래의 다음 코드는 아무런 문제가되지 않습니다.

while ($row = $resultado->fetch(PDO::FETCH_ASSOC)) { 

       echo ' var myLatlng1 = new google.maps.LatLng('. 
       $row['LATITUD'].', '.$row['LONGITUD'].'); 
       var marker1 = new google.maps.Marker({ 
       position: myLatlng1, 
       map: map, 
       }); 



       var infowindow = new google.maps.InfoWindow({ 
       content: "hello" 
       }); 


       infowindow.open(map, marker1); 


       '; 
     } 

당신이 정보창의 내용을 볼 수 있듯이

변경하고 나는 그것을 변경하는 경우, 올바르게 작동하고지도를로드 할 수 있었다. 위 예제의 문자열 "hello"대신 데이터베이스에 저장된 정보를 표시하는 정보창을 표시하고 싶습니다.

내 접근 방식이 실패하고 각 마커에 대해 원하는 정보창을 표시하기 위해 문제를 해결하는 방법을 알고 싶습니다.

Answer 1

문제는 데이터베이스 또는 PHP와 관련이 없습니다. 문제는 그 데이터를 에코합니다.

하나의 간단한 예는,이는 동안 루프이 코드의 여러 인스턴스를 생성

while ($row = $resultado->fetch(PDO::FETCH_ASSOC)) { 
    echo ' var myLatlng1 = new google.maps.LatLng('. 
    ... 

작동하지 않습니다 매우 분명하다. myLatlng1 변수는 단순히 덮어 씁니다.

당신이해야 할 일은 기능과 데이터를 분리하는 것입니다.

그래서 1 var.

그것은이 같은 (내 PHP는 약간 녹슨, 내가 오류를 생성하고 있지 않다) 희망해야한다 :

<?php 
$data = array(); // we make an empty object/array, we will fill it with the data in the rows 
while ($row = $resultado->fetch(PDO::FETCH_ASSOC)) { 
    $data[] = array(
    'LATITUD' => $row['LATITUD'], 
    'LONGITUD' => $row['LONGITUD'], 
    'ASUNTO' => $row['ASUNTO'], 
); 
} 
// now we echo this variable, 1 variable containing all the data 
$data_string = json_encode($data); // this turns php arrays into a javascript-readable object 
echo 'var my_data = ' . $data_string .';'; // notice which ; is for javascript and which is for php 
?> 

var에 my_data 이런 식으로 뭔가 (내가의 일부 지역을 삽입 할 수 있습니다됩니다 브뤼셀) : 이제

var my_data = [{"LATITUD":"50.89496405015655","LONGITUD":"4.341537103056892","ASUNTO":"Atomium"},{"LATITUD":"50.84501941894387","LONGITUD":"4.349947169423087","ASUNTO":"Manneken Pis"},{"LATITUD":"50.83847065124941","LONGITUD":"4.376028969883903","ASUNTO":"European Parliament"}]; 

---

자바 스크립트

. 당신은 어떻게 정보를 사용합니까? 하드 코딩 된 my_data를 사용하므로이 코드를 복사/붙여 넣기하고 자바 스크립트를 테스트 할 수 있습니다.

은 API 키를 잊지 마세요

<style> 
    html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    } 
    #map { 
    height: 90%; 
    } 
</style> 
<div id="map"></div> 
<script> 
    var my_data = [{"LATITUD":"50.89496405015655","LONGITUD":"4.341537103056892","ASUNTO":"Atomium"},{"LATITUD":"50.84501941894387","LONGITUD":"4.349947169423087","ASUNTO":"Manneken Pis"},{"LATITUD":"50.83847065124941","LONGITUD":"4.376028969883903","ASUNTO":"European Parliament"}]; 

    var map; 
    function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: 50.869754630095834, lng: 4.353812903165801}, 
     zoom: 12 
    }); 
    for(var i=0; i<my_data.length; i++) { 
     // marker 
     var position = {lat: Number(my_data[i].LATITUD), lng: Number(my_data[i].LONGITUD)}; 
     var marker = new google.maps.Marker({ 
     position: position, 
     title: my_data[i].ASUNTO, 
     map: map 
     }); 

     // infowindow 
     var infowindow = new google.maps.InfoWindow({ 
     content: my_data[i].ASUNTO, 
     map: map, 
     position: position 
     }); 
    } 
    } 
</script> 
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>