Question

我正在尝试创建一个包含多个地理位置位置的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));
}

working fiddle

代码段：

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: