2012-10-31 18 views
0

我正試圖從一個PHP數組中顯示Google Map上的標記,這個數組包含經緯度值&。如何顯示來自PHP數組的多個Google地圖標記?

PHP的陣列看起來像這樣的時刻:

Array 
(
[0] => Array 
    (
     [0] => 55.8490116, -4.222272800000042 
     [1] => 54.5979369, -7.274279400000069 
    ) 

[1] => Array 
    (
     [0] => 55.8490116, -4.222272800000042 
    ) 

) 

我,那麼這個數組添加到一個JS陣列上的PHP像這樣:

<script type="text/javascript"> 
var markers = <?php echo $myarray; ?>; 
</script> 

然後在我的JS的它看起來像:

var infowindow = new google.maps.InfoWindow(); 
var marker, i; 
var bounds = new google.maps.LatLngBounds(); 

console.log(markers); 

for (i = 0; i < markers.length; i++) { 

    var pos = new google.maps.LatLng(markers[1][0]); 

    marker = new google.maps.Marker({ 
     position: pos, 
     map: map 
    }); 

    google.maps.event.addListener(marker, 'click', (function(marker, i) { 

     return function() { 
      infowindow.setContent(markers[1][0]); 
      infowindow.open(map, marker); 
     } 

    })(marker, i)); 

} 

我不知道下一步該去哪裏。我知道我的數組並不模仿Google Maps API所要求的功能,但不知道如何將其更改爲適合的功能。

感謝 羅伯特

+0

與我貼在回答任何運氣?你還沒有回覆讓我知道它是否有效。 –

回答

2

我覺得你的方法的問題是在呼應陣列。

我會嘗試修復它會創造JS空數組稱爲markers,通過PHP陣列的所有值循環再追加每個值來markers的方式。

另請注意,您在PHP中有陣列,所以您需要一個嵌套循環。

請讓我知道你是否需要任何代碼示例,或者這樣就足夠了。

0

你可以這樣做:

<?php 
$marker[] = array(
       "lat"=> '17.454000', 
       "lng"=> '78.434952'); 
$marker[] = array(
       "title"=> 'shilparamam', 
       "lat"=> '17.452665', 
       "lng"=> '78.435608', 
       "description"=> 'Mumbai formerly Bombay, is the capital city of the Indian state of Maharashtra.'); 
$marker[] = array(
       "title"=> 'image hospitals', 
       "lat"=> '17.452421', 
       "lng"=> '78.435715', 
       "description"=> 'Pune is the seventh largest metropolis in India, the second largest in the state of Maharashtra after Mumbai.'); 
?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
</head> 
<body> 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>  
    <script type="text/javascript"> 
     <?php 
     $objJSON = json_encode($marker); 
     echo "var markers = ". $objJSON . ";\n"; 
     ?> 
     window.onload = function() { 
      var mapOptions = { 
       center: new google.maps.LatLng(markers[0].lat, markers[0].lng), 
       zoom: 10, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions); 
      var infoWindow = new google.maps.InfoWindow(); 
      var lat_lng = new Array(); 
      var latlngbounds = new google.maps.LatLngBounds(); 
      for (i = 0; i < markers.length; i++) { 
       var data = markers[i] 
       var myLatlng = new google.maps.LatLng(data.lat, data.lng); 
       lat_lng.push(myLatlng); 
       var marker = new google.maps.Marker({ 
        position: myLatlng, 
        map: map, 
        title: data.title 
       }); 
       latlngbounds.extend(marker.position); 
       (function (marker, data) { 
        google.maps.event.addListener(marker, "click", function (e) { 
         infoWindow.setContent(data.description); 
         infoWindow.open(map, marker); 
        }); 
       })(marker, data); 
      } 
      map.setCenter(latlngbounds.getCenter()); 
      map.fitBounds(latlngbounds); 

     } 
    </script> 
    <div id="dvMap" style="width: 500px; height: 500px"> 
    </div> 
</body> 
</html> 
相關問題