谷歌地图信息窗口在每个标记上打开相同的消息

Google Map infowindow opening same message on each marker

本文关键字：消息 信息窗 信息 窗口 谷歌地图      更新时间：2023-09-26

我使用谷歌地图将标记放置在地图上，使用Geocoder按地址放置。标记都正确地放置在地图上，但每个标记上的信息窗口总是使用相同的消息，而不是与该标记相关的消息。

我现在尝试了几种不同的方法，但总是得到相同的结果。我目前拥有的代码如下，它在Initialize函数中：

var locations = [
  ['Message 1', -33.890542, 151.274856, 4, 'leeds'],
  ['Message 2', -33.923036, 151.259052, 5 , 'manchester'],
  ['Message 3', -34.028249, 151.157507, 3 , 'london'],
  ['Message 4', -33.80010128657071, 151.28747820854187, 2, 'newcastle'],
  ['Message 5', -33.950198, 151.259302, 1, 'birmingham']
];
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
if (geocoder) {
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
      map.setCenter(results[0].geometry.location);
        var infowindow = new google.maps.InfoWindow();
        var image = {
            url: 'assets/img/banners/404.png',
            // This marker is 20 pixels wide by 32 pixels tall.
            size: new google.maps.Size(20, 32),
            // The origin for this image is 0,0.
            origin: new google.maps.Point(0,0),
            // The anchor for this image is the base of the flagpole at 0,32.
            anchor: new google.maps.Point(0, 32)
          };
        var marker;


        for (var x = 0; x < locations.length; x++) {
            infowindow = new google.maps.InfoWindow({content:locations[x][0]});
            $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+locations[x][4]+'&sensor=false', locations, function (data) {
                var p = data.results[0].geometry.location
                var latlng = new google.maps.LatLng(p.lat, p.lng);
                marker = new google.maps.Marker({
                    position: latlng,
                    map: map
                });
                google.maps.event.addListener(marker, 'click', (function(marker, x) {
                return function() {
                  infowindow.open(map, this);
                }
              })(marker, x));
            });
        }

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

工作示例（使用地理编码器而不是AJAX，因为无法保证服务发送所需的Access-Control-Allow-Origin-标头）：

    for (var x = 0; x < locations.length; x++) {
        geocoder.geocode({address:locations[x][4]},
                         (function(x){
                            return function(data,status){
                             if (status == google.maps.GeocoderStatus.OK) {
                              marker = new google.maps.Marker({
                                position: data[0].geometry.location,
                                map: map
                              });
                              google.maps.event.addListener(marker, 'click', 
                                (function(marker, x) {
                                  return function() {
                                    infowindow.setContent(locations[x][0]);
                                    infowindow.open(map, this);
                                  }
                                 })(marker, x));
                              }
                            }
                         })(x)
                        );
    }

演示：http://jsfiddle.net/doktormolle/utg45kzq/

相关文章：