Question

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

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

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

知道可能导致这种情况的原因吗？

谢谢，亚历

Answer 1

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

原因在于你的回调函数。在initializeTrailheads()函数中，您创建了一个本地变量名marker，并在其上附加了一个点击事件。然后，您为infowindow分配了标记，infowindow.open(map, marker); google.map.event.addListener具有一个回调函数，当单击完成时，该函数位于不同的范围内。因此，它基本上抓取了其父级范围的marker变量，因为它本身没有一个变量。通常情况下，当点击事件被触发时，标记将成为您初始化的最新标记（这是最后一个），并且基本上附加了信息窗口，该信息窗口不会链接到之前的任何其他标记，因此引起你的问题。您要做的只是将变量marker替换为this，该google.maps.event.addListener(marker, 'click', function() { infowindow.open(map, this); });指的是被点击的标记，应该可以解决您的问题：

{{1}}

这只是我的头脑。如果我在某些部分没有明确解释，请告诉我。

Answer 2

这是一个非常常见的问题。请查看从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);
  }
}

希望你找到这个有用的

获取事件属性的Google Map错误标记

2 个答案: