2014-10-11 94 views
-1

我正在使用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://stackoverflow.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

回答

1

工作示例(使用地理編碼,而不是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

相關問題