Google Map infowindow在每个标记上打开相同的消息

问题描述:

我正在使用Google地图将标记放到地图上,并使用Geocoder按地址放置。标记全部正确地放置在地图上,但每个infowindow都始终使用相同的消息,而不是与该标记相关的消息。Google Map infowindow在每个标记上打开相同的消息

我已经尝试了几种不同的方法,但总是以相同的结果。我目前的代码如下,这是初始化函数中:

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); 
    } 
    }); 
} 
+0

必须设置在你为什么要使用地理编码器的点击处理程序 – 2014-10-11 22:28:16

+0

信息窗口内容?你已经有了标记的坐标。如果删除了这个,这是[Google Maps JS API v3 - 简单多标记示例]的副本(http://*.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker -example?rq = 1) – geocodezip 2014-10-11 23:38:20

+0

坐标是一个例子,我需要它使用位置名称。谢谢。 – Quinny 2014-10-12 08:54:29

工作示例(使用地理编码,而不是AJAX,因为没有保证的服务发送所需要的Access-Control-Allow-Origin -header):

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/

+0

太棒了,非常感谢您的帮助! – Quinny 2014-10-12 16:04:13