Question

我在地图上有多个标记。但它不会将相应的infoWindows附加到标记。它们总是在左上角。不知道这里干扰了什么。

 var geocoder = new google.maps.Geocoder();

    var addresses = [
        'Marienstr. 37a 27472 Cuxhaven',
        'Bahnhofstr. 15 21745 Hemmoor',
        'Richtpfad 20 26506 Norden',
        'Eulenbusch 4 21391 Reppenstedt'
    ];

    var bounds = new google.maps.LatLngBounds();

    var map = new google.maps.Map(document.getElementById('map'), {
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

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

   for (i=0; i < addresses.length; i++) {
        geocoder.geocode( { 'address': addresses[i]}, 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
            });

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                  infowindow.setContent(addresses[i]);
                  infowindow.open(map, marker);
                };
            })(marker, i));

            bounds.extend(results[0].geometry.location);
            map.setCenter(bounds.getCenter());
            map.fitBounds(bounds);
          } else {
            alert("Geocode was not successful for the following reason: " + status);
          }
        });
    }

Answer 1

它在这里失败（正如MrUpsidown观察到的）infowindow.setContent(addresses[i]);，因为当点击监听器运行i = 4且地址[4]不存在时。

解决问题的一种方法是在地理编码功能和标记（下面）上使用功能闭包。但是，正如Upsidown先生观察到的那样，如果你有超过10个地址，它将无法工作。

function geocodeAddress(addresses, i) {
     geocoder.geocode( { 'address' : addresses[i]}, 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
         });

         google.maps.event.addListener(marker, 'click', (function(marker, i) {
             return function() {
               infowindow.setContent(addresses[i]);
               infowindow.open(map, marker);
             };
         })(marker, i));

         bounds.extend(results[0].geometry.location);
         map.setCenter(bounds.getCenter());
         map.fitBounds(bounds);
       } else {
         alert("Geocode was not successful for the following reason: " + status);
       }
     });
}

工作代码段：

    function geocodeAddress(addresses, i) {
         geocoder.geocode( { 'address' : addresses[i]}, 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
             });

             google.maps.event.addListener(marker, 'click', (function(marker, i) {
                 return function() {
                   infowindow.setContent(addresses[i]);
                   infowindow.open(map, marker);
                 };
             })(marker, i));

             bounds.extend(results[0].geometry.location);
             map.setCenter(bounds.getCenter());
             map.fitBounds(bounds);
           } else {
             alert("Geocode was not successful for the following reason: " + status);
           }
         });
    }

    var geocoder = new google.maps.Geocoder();
   
    var addresses = [
        'Marienstr. 37a 27472 Cuxhaven',
        'Bahnhofstr. 15 21745 Hemmoor',
        'Richtpfad 20 26506 Norden',
        'Eulenbusch 4 21391 Reppenstedt'
    ];
    
    var bounds = new google.maps.LatLngBounds();
    
    var map = new google.maps.Map(document.getElementById('map'), {
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
   
   var infowindow = new google.maps.InfoWindow(), marker, i;
   
   for (i=0; i < addresses.length; i++) {
        geocodeAddress(addresses,i);
    }

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<div id="map" style="width: 500px; height: 400px;"></div>

Answer 2

地理编码器是异步的。您的for循环在第一个地理编码请求获得响应之前结束。因此，您无法使用i，因为它始终为4且addresses[4]不存在。

无论如何你不应该这样做，因为：

Google Maps API提供了一个地理编码器类，用于从用户输入动态地进行地理编码和反向地理编码。首次加载API时，将为您分配一个初始的地理编码请求配额。使用此配额后，其他请求将按每秒的速率限制。如果您希望对静态的已知地址进行地理编码，请参阅地理编码Web服务文档。

https://developers.google.com/maps/documentation/javascript/geocoding

如果您对很多地址进行地理编码，尤其是在循环中（每秒限制），您可能会达到极限。

在此处阅读更多内容：https://developers.google.com/maps/articles/geocodestrat

谷歌地图标记错误的位置

2 个答案: