谷歌地图将数据传递给标记

Question

我很难在 Google 地图标记上的信息窗口中正确获取信息。标记位于正确的位置，但这是将第二个位置的名称传递到第一个和第二个信息窗口中。

<script>
 function initMap() {
      var mapOptions = {
              zoom: 14,
              scrollwheel: false,
              center: new google.maps.LatLng(31.44, -100.47)
            }

      var map = new google.maps.Map(document.getElementById('super_map'), mapOptions);

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

      var addresses = ["3000 Main St San Angelo TX", "4001 Sunset Dr San Angelo TX"];

      var names = ['First Place', 'Second Place'];

     for(var x = 0; x < addresses.length; x++){
        var name = names[x];

        geocoder.geocode( { 'address': addresses[x]}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {


            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location,
                animation: google.maps.Animation.DROP,
            });

            var contentString = name;

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

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

        });
     }

    }

    google.maps.event.addDomListener(window, 'load', initMap);
    google.maps.event.addDomListener(window, 'resize', initMap);
</script>

我尝试使用 setContent 进行设置，但结果相同...

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

Answer 1

嗨，正如上面 cmets 中所解释的那样，地理编码器调用不会在循环中工作。

但是，一旦你清理了它，你可以通过在标记上设置适当的数据来将数据传递给标记：

 var marker = new google.maps.Marker({
            map: map,
            data: someDataProperty,// either the geocoder result or custom data
            position: results[0].geometry.location,
            animation: google.maps.Animation.DROP,
        });

然后在您的点击中，即使他们获得标记并使用数据属性：

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

这是一个 JS fiddle，展示了它是如何工作的：https://jsfiddle.net/loanburger/dh4whm25/

Answer 2

解决您的问题的一个选项是在“名称”上关闭函数。下面的代码为循环的每次迭代创建一个匿名函数，该函数在 name 变量上保存函数闭包。

geocoder.geocode({
  'address': addresses[x]
// get function closure on "name"
}, (function(name) {
  return function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location,
        animation: google.maps.Animation.DROP,
      });
      var contentString = name;
      var infowindow = new google.maps.InfoWindow({
        content: contentString
      });
      google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
      });
    }
  }
})(name));

proof of concept fiddle

代码 sn-p：

function initMap() {
  var mapOptions = {
    zoom: 14,
    scrollwheel: false,
    center: new google.maps.LatLng(31.44, -100.47)
  }
  var map = new google.maps.Map(document.getElementById('super_map'), mapOptions);
  var bounds = new google.maps.LatLngBounds();
  var geocoder = new google.maps.Geocoder();
  for (var x = 0; x < addresses.length; x++) {
    var name = names[x];
    geocoder.geocode({
      'address': addresses[x]
    }, (function(name) {
      // get function closure on "name"
      return function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          bounds.extend(results[0].geometry.location);
          map.fitBounds(bounds);
          var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location,
            animation: google.maps.Animation.DROP,
          });
          var contentString = name;
          var infowindow = new google.maps.InfoWindow({
            content: contentString
          });
          google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map, marker);
          });
        }
      }
    })(name));
  }
}

google.maps.event.addDomListener(window, 'load', initMap);
google.maps.event.addDomListener(window, 'resize', initMap);
var addresses = ["3000 Main St San Angelo TX", "4001 Sunset Dr San Angelo TX"];
var names = ['First Place', 'Second Place'];

html,
body,
#super_map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="super_map"></div>