29

我必须从地址数组中实现多个标记功能。正在从数据库中获取地址字符串。

我的地址数组看起来像这样

    var address = <?php echo $add_js ?>;

我在互联网上甚至在这个论坛上浏览了很多示例，但在大多数示例中，这些数据库中已经提供了纬度和经度。有什么办法可以让我使用该地址数组并在谷歌地图上放置多个标记。或解释此类概念的任何示例？！

我已经从 JSFIDDLE 练习了这个例子，但我没有得到任何输出。

       <script>
   var geocoder;
       var map;
       var markersArray = [];

   function initialize() 
    {
        geocoder = new google.maps.Geocoder();

    latlang = geocoder.geocode( { 

           'address': 'New Delhi, India'},                                             

            function(results, status) 
    {  

         if (status == google.maps.GeocoderStatus.OK) 
           {
              map.setCenter(results[0].geometry.location);
              marker = new google.maps.Marker({
              map: map,
              position: results[0].geometry.location
            });
            markersArray.push(marker);

             }
             else
           {
               alert("Geocode was not successful for the following reason: " + status);
                       }
           });

          var myOptions = 
          {
                      center: latlang, zoom: 5, 
          mapTypeId: google.maps.MapTypeId.SATELLITE,
                      navigationControlOptions: 
          {
                   style: google.maps.NavigationControlStyle.SMALL
                      }
                      };
          map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                     plotMarkers();
                    }

               var locationsArray = new Array(
               "New Delhi, India", "Gurgaon,Haryana,  India", "Mumbai, India", 
               "Noida Sector-63,India","Banglore, Karnataka,India");

              function plotMarkers(){

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

          codeAddresses(locationsArray[i]);

          }
          }

         function codeAddresses(address){
         geocoder.geocode( { 'address': address}, function(results, status) { 
         if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
            });
        //markersArray.push(marker); 
        }
        else{
        alert("Geocode was not successful for the following reason: " + status);
        }
        });
        }

        google.maps.event.addDomListener(window, 'load', initialize);

        </script>
4

3 回答 3

49

不管你的情况如何，这里有一个工作演示，它根据一组地址在地图上创建标记。

http://jsfiddle.net/P2QhE/

还嵌入了 Javascript 代码：

$(document).ready(function () {
    var map;
    var elevator;
    var myOptions = {
        zoom: 1,
        center: new google.maps.LatLng(0, 0),
        mapTypeId: 'terrain'
    };
    map = new google.maps.Map($('#map_canvas')[0], myOptions);

    var addresses = ['Norway', 'Africa', 'Asia','North America','South America'];

    for (var x = 0; x < addresses.length; x++) {
        $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=false', null, function (data) {
            var p = data.results[0].geometry.location
            var latlng = new google.maps.LatLng(p.lat, p.lng);
            new google.maps.Marker({
                position: latlng,
                map: map
            });

        });
    }

});
于 2013-10-28T17:07:42.930 回答
22

回答添加多个标记。

更新（地理编码多个地址）

这是具有多个地址的工作示例地理编码。

 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
 </script> 
 <script type="text/javascript">
  var delay = 100;
  var infowindow = new google.maps.InfoWindow();
  var latlng = new google.maps.LatLng(21.0000, 78.0000);
  var mapOptions = {
    zoom: 5,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var geocoder = new google.maps.Geocoder(); 
  var map = new google.maps.Map(document.getElementById("map"), mapOptions);
  var bounds = new google.maps.LatLngBounds();

  function geocodeAddress(address, next) {
    geocoder.geocode({address:address}, function (results,status)
      { 
         if (status == google.maps.GeocoderStatus.OK) {
          var p = results[0].geometry.location;
          var lat=p.lat();
          var lng=p.lng();
          createMarker(address,lat,lng);
        }
        else {
           if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
            nextAddress--;
            delay++;
          } else {
                        }   
        }
        next();
      }
    );
  }
 function createMarker(add,lat,lng) {
   var contentString = add;
   var marker = new google.maps.Marker({
     position: new google.maps.LatLng(lat,lng),
     map: map,
           });

  google.maps.event.addListener(marker, 'click', function() {
     infowindow.setContent(contentString); 
     infowindow.open(map,marker);
   });

   bounds.extend(marker.position);

 }
  var locations = [
           'New Delhi, India',
           'Mumbai, India',
           'Bangaluru, Karnataka, India',
           'Hyderabad, Ahemdabad, India',
           'Gurgaon, Haryana, India',
           'Cannaught Place, New Delhi, India',
           'Bandra, Mumbai, India',
           'Nainital, Uttranchal, India',
           'Guwahati, India',
           'West Bengal, India',
           'Jammu, India',
           'Kanyakumari, India',
           'Kerala, India',
           'Himachal Pradesh, India',
           'Shillong, India',
           'Chandigarh, India',
           'Dwarka, New Delhi, India',
           'Pune, India',
           'Indore, India',
           'Orissa, India',
           'Shimla, India',
           'Gujarat, India'
  ];
  var nextAddress = 0;
  function theNext() {
    if (nextAddress < locations.length) {
      setTimeout('geocodeAddress("'+locations[nextAddress]+'",theNext)', delay);
      nextAddress++;
    } else {
      map.fitBounds(bounds);
    }
  }
  theNext();

</script>

因为我们可以通过函数来​​解决这个问题setTimeout()。

正如@geocodezip 所说，每次您加载页面时，我们仍然不应该对已知位置进行地理编码

在以下链接中很好地解释了这些的另一种选择：

如何避免 GoogleMap 地理编码限制！

地理编码多个地址教程，作者：Mike Williams

Google Developers 的示例

于 2014-01-28T06:44:33.370 回答
4

这是我的解决方案：

依赖项：Gmaps.js、jQuery

var Maps = function($) {
   var lost_addresses = [],
       geocode_count  = 0;

   var addMarker = function() { console.log('Marker Added!') };

   return {
     getGecodeFor: function(addresses) {
        var latlng;
        lost_addresses = [];
        for(i=0;i<addresses.length;i++) {
          GMaps.geocode({
            address: addresses[i],
            callback: function(response, status) {
              if(status == google.maps.GeocoderStatus.OK) {
                addMarker();
              } else if(status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
                lost_addresses.push(addresses[i]);
              }

               geocode_count++;
               // notify listeners when the geocode is done
               if(geocode_count == addresses.length) {
                 $.event.trigger({ type: 'done:geocoder' });
               }
            }
          });
        }
     },
     processLostAddresses: function() {
       if(lost_addresses.length > 0) {
         this.getGeocodeFor(lost_addresses);
       }
     }
   };
}(jQuery);

Maps.getGeocodeFor(address);

// listen to done:geocode event and process the lost addresses after 1.5s
$(document).on('done:geocode', function() {
  setTimeout(function() {
    Maps.processLostAddresses();
  }, 1500);
});
于 2014-03-11T19:53:53.923 回答