2013-08-15 2 views
0

У меня есть несколько LAT/LONG в массиве на PHP, но код, отображаемый для отображения lat/long, должен отображать одиночный lat/long, я пытался перебрать массив в for цикл, но это не сработало показано ниже:Как отобразить несколько широт и долготу в Google Map

<html> 
    <head> 
     <style type="text/css"> 
      div#map { 
       position: relative; 
      } 

      div#crosshair { 
       position: absolute; 
       top: 192px; 
       height: 19px; 
       width: 19px; 
       left: 50%; 
       margin-left: -8px; 
       display: block; 
       background: url(crosshair.gif); 
       background-position: center center; 
       background-repeat: no-repeat; 
      } 
     </style> 
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
     <script type="text/javascript"> 
      var map; 
      var geocoder; 
      var centerChangedLast; 
      var reverseGeocodedLast; 
      var currentReverseGeocodeResponse; 

      function initialize() { 
       <?php for($i=0;$i<count($data);$i++){?> 
       var latlng = new google.maps.LatLng(<?php echo $data[$i]['lat'].','.$data[$i]['long']; ?>); 
       var myOptions = { 
        zoom: 40, 
        center: latlng, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 
       map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
       geocoder = new google.maps.Geocoder(); 

       var marker = new google.maps.Marker({ 
        position: latlng, 
        map: map, 
        title: "<?php echo $data[$i]['deviceID'];?>" 
       }); 
       <?php }?> 
      } 

     </script> 
    </head> 
    <body onLoad="initialize()"> 
     <div id="map" style="width:200px; height:200px"> 
      <div id="map_canvas" style="width:100%; height:200px"></div> 
      <div id="crosshair"></div> 
     </div> 


    </body> 
</html> 

Я подозреваю, что должен быть какой-то параметр multiple в javasctipt кода, чтобы сделать эту работу, но не уверен ... может кто-нибудь помочь в этом.

+0

возможно дубликат [Google Maps JS API v3 - Простой Multiple Marker Пример] (http://stackoverflow.com/questions/3059044/google-maps-js- api-v3-simple-multiple-marker-example) – geocodezip

+0

Возможно, было бы более полезно разместить HTML-код, который просматривает браузер. Поможет вам понять, что происходит. – geocodezip

ответ

1

Вы создаете новый map на каждой итерации. Место map определение и geocoder определение вне foreach:

function initialize() { 
    var myOptions = { 
     zoom: 40, 
     center: latlng, // set some default latlng here, e.g $data[0]['lat'], $data[0]['lng'] 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    geocoder = new google.maps.Geocoder(); 
    <?php for($i=0;$i<count($data);$i++){?> 
    var latlng = new google.maps.LatLng(<?php echo $data[$i]['lat'].','.$data[$i]['long']; ?>); 
    var marker = new google.maps.Marker({ 
     position: latlng, 
     map: map, 
     title: "<?php echo $data[$i]['deviceID'];?>" 
    }); 
    <?php }?> 
}