Google 具有多个地理编码位置和点击警报的地图

Question

我正在尝试创建一个 Google 地图，其中包含多个地理编码位置和每个位置的唯一警报。

最终，位置和位置内容将动态生成，但现在，我只是想让它与静态内容一起工作。

我的地图点显示正确，但是，我遇到了警报问题，该警报不会随着适当的递增变量出现。

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

http://jsfiddle.net/rum0gxtw/

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

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

我需要它递增，所以它 returns 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));
}

working fiddle

代码片段：

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
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map" style="border: 2px solid #3872ac;"></div>

Google 具有多个地理编码位置和点击警报的地图

Google Maps with multiple geocode locations and alerts on click

jquery

google-maps

google-maps-api-3

increment