Google地图，包含多个地理位置位置和点击提醒

我正在尝试创建一个包含多个地理位置位置的Google地图，并为每个位置创建一个独特的提醒。

最终，位置和位置内容将动态生成，但是现在，我只是尝试使用静态内容。

我的地图点正确显示，但是，我遇到了警报的问题，这些警报在增量变量就位时不会出现。

据我所知，locationContent [i] [0]中的var [i]没有被数字替换。

http://jsfiddle.net/rum0gxtw/

例如，当我用locationContent [0] [1]替换代码时，它返回alert1（在所有3个标记上）。

http://jsfiddle.net/rum0gxtw/1/

我需要它增加，所以它返回相应标记的alert1，alert2，alert3。

我几个小时都在盯着代码，现在尝试各种方法来解决它。 我想我只是缺少一些基本的东西。 这是我的代码：

var locations = [ ['Loughbourough University', 'LE11 3TU'], ['Durham School', 'DH1 4SZ'], ['Oxford University', 'OX4 1EQ'], ]; // Alert Content var locationContent = [ ['wow1', 'alert1'], ['wow2', 'alert2'], ['wow3', 'alert3'] ]; var image = 'icon.png'; var map = new google.maps.Map(document.getElementById('map'), { zoom: 7, center: new google.maps.LatLng(43.253205,-80.480347), mapTypeId: google.maps.MapTypeId.ROADMAP }); var geocoder = new google.maps.Geocoder(); for (i = 0; i < locations.length; i++) { geocoder.geocode( { 'address': locations[i][1]}, function(results, status) { //alert(status); if (status == google.maps.GeocoderStatus.OK) { //alert(results[0].geometry.location); map.setCenter(results[0].geometry.location); marker = new google.maps.Marker({ position: results[0].geometry.location, icon: image, map: map }); google.maps.event.addListener(marker, 'click', (function(i) { return function() { alert(locationContent[i][1]); } })(i)); } else { alert("some problem in geocode" + status); } }); } 

如果有人可以帮我解决这个问题，我将非常感激。

谢谢。

Answer 1

地理编码是异步的。 当循环结束时i = locations.length; 这是所有地理编码回调运行的时候。

在i为地理编码器使用匿名函数闭包，以及标记单击事件处理程序：

 for (i = 0; i < locations.length; i++) { geocoder.geocode({ 'address': locations[i][1] }, (function(i) { return function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); marker = new google.maps.Marker({ position: results[0].geometry.location, icon: image, map: map }); google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { alert(locationContent[i][1]); }; })(marker, i)); } else { alert("some problem in geocode" + status); } }; })(i)); } 

工作小提琴

代码段：

 function initialize() { var locations = [ ['Loughbourough University', 'LE11 3TU'], ['Durham School', 'DH1 4SZ'], ['Oxford University', 'OX4 1EQ'] ]; // Alert Content var locationContent = [ ['wow1', 'alert1'], ['wow2', 'alert2'], ['wow3', 'alert3'] ]; // var image = 'icon.png'; var map = new google.maps.Map(document.getElementById('map'), { zoom: 7, center: new google.maps.LatLng(43.253205, -80.480347), mapTypeId: google.maps.MapTypeId.ROADMAP }); var geocoder = new google.maps.Geocoder(); for (i = 0; i < locations.length; i++) { geocoder.geocode({ 'address': locations[i][1] }, (function(i) { return function(results, status) { //alert(status); if (status == google.maps.GeocoderStatus.OK) { //alert(results[0].geometry.location); map.setCenter(results[0].geometry.location); marker = new google.maps.Marker({ position: results[0].geometry.location, // icon: image, map: map }); google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { alert(locationContent[i][1]); }; })(marker, i)); } else { alert("some problem in geocode" + status); } }; })(i)); } } google.maps.event.addDomListener(window, 'load', initialize); 

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