谷歌地图错误标记获取事件属性答案

【问题标题】：Google Map wrong marker getting the event attribute谷歌地图错误标记获取事件属性
【发布时间】：2011-07-16 08:58:40
【问题描述】：

我正在尝试为谷歌地图上的每个标记添加一个事件侦听器，但由于某种原因，最后一个标记是唯一获得侦听器的标记。

以下是出现问题的地图页面： http://www.comehike.com/outdoors/parks/trailhead.php

你看，当你点击任何标记时，只有左下角的会弹出 html。我需要的是在被点击的标记上发生弹出窗口。

知道是什么原因造成的吗？

谢谢，亚历克斯

【问题讨论】：

标签： javascript google-maps map scope google-maps-markers

【解决方案1】：

这是一个很常见的问题。看看这个取自here的代码示例

var map;
var infoWindow;
var message = ['This', 'is', 'the', 'secret', 'message'];

function initialize() {
  var mapDiv = document.getElementById('map-canvas');
  map = new google.maps.Map(mapDiv, {
    center: new google.maps.LatLng(37.4419, -122.1419),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  infoWindow = new google.maps.InfoWindow();

  google.maps.event.addListenerOnce(map, 'tilesloaded', addMarkers);
}

function addMarkers() {
  var bounds = map.getBounds();
  var southWest = bounds.getSouthWest();
  var northEast = bounds.getNorthEast();
  var lngSpan = northEast.lng() - southWest.lng();
  var latSpan = northEast.lat() - southWest.lat();

  function createMarker(map, position, number) {
    var marker = new google.maps.Marker({
      position: position,
      map: map
    });

    google.maps.event.addListener(marker, 'click', function() {
      var myHtml = '<strong>#' + number + '</strong><br/>' + message[number - 1];
      infoWindow.setContent(myHtml);
      infoWindow.open(map, marker);
    });
  }

  for (var i = 1; i <= 5; i++) {
    var latLng = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(),
                                        southWest.lng() + lngSpan * Math.random());

    createMarker(map, latLng, i);
  }
}

希望你觉得这很有用

【讨论】：

但是我特别做错了什么，我需要做不同的事情？谢谢！
首先你必须为同一个事件注册监听器。将它们减少到一个。然后构造信息窗口 html (var contentString = "Hello
";) 点击事件的函数里面。
你的意思是我有两个注册的听众？我刚刚检查了一下，似乎我只有一个听众。也许我错过了一些东西。我的另一个听众是什么？
@Genadinik 它与范围以及将标记分配给信息窗口的方式有关
@Genadinik 您必须了解闭包是什么，因为这正是您在这里所缺少的。请看这里blog.morrisjohns.com/javascript_closures_for_dummies.html

【解决方案2】：

这里是JSFiddle Demo，它类似于您网站的谷歌地图，但使用 ajax，我只是将 3 个“虚拟”Lat Lng 坐标放置在它上面。如果您需要进一步的解释帮助，请告诉我：

原因在于您的回调函数。在您的 initializeTrailheads() 函数中，您创建了一个局部变量名称 marker 并附加了一个点击事件。然后，您将标记分配给执行infowindow.open(map, marker); google.map.event.addListener 的信息窗口，当单击完成时，该回调函数位于不同的范围内。因此，它基本上抓住了其父范围的marker 变量，因为它本身没有一个变量。通常在触发点击事件时，标记成为您初始化的最新标记（这是最后一个标记），并且基本上与信息窗口相连，该信息窗口不链接到它之前的任何其他标记，因此导致你的问题。您所要做的只是将变量 marker 替换为 this，它指的是被点击的标记，应该可以解决您的问题：

 google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map, this);
 });

这只是我的想法。如果我没有在某些部分清楚地解释它，请告诉我。

【讨论】：