点击时获得相同的 Google Maps Marker id

Question

当我单击它们时，我试图在谷歌地图上获取各个标记的 ID/索引。

目前，我只得到相同的id: 4

这是JSFIDDLE

这里是我设置标记的地方：

function setMarkers(locations) {

    var bounds  = new google.maps.LatLngBounds();

    for (var i = 0; i < locations.length; i++) {
        var loc = locations[i];
        var currentLatLong = new google.maps.LatLng(loc[1], loc[2]);
        var marker = new google.maps.Marker({
            position: currentLatLong,
            map: map,
            index: i,
            animation: google.maps.Animation.DROP,
            title: loc[0],
            zIndex: loc[3]
        });

        marker.addListener('click', function(e, i) {
            var info = marker.index;
            document.getElementById("markerInfo").innerHTML = "<h1>id:" + info + "</h1>";
        });

        bounds.extend(currentLatLong);

        // Push marker to markers array
        markers.push(marker);
    }

    map.fitBounds(bounds);      
    map.panToBounds(bounds);    
}

如何复制：

1) 点击屏幕左侧的搜索按钮

2) 单击一个标记，然后单击另一个。

我想获取标记的索引，以便显示与标记匹配的数组中的数据。

有人有什么想法吗？我认为这是因为循环覆盖了事件侦听器，我尝试将其移出但没有任何反应。

Answer 1

“点击”事件监听函数内部this指的是被点击的标记，所以改一下：

marker.addListener('click', function(e, i) {
    var info = marker.index;
    document.getElementById("markerInfo").innerHTML = "<h1>id:" + info + "</h1>";
});

收件人：

marker.addListener('click', function(e, i) {
    var info = this.index;
    document.getElementById("markerInfo").innerHTML = "<h1>id:" + info + "</h1>";
});

proof of concept fiddle

（另一种选择是在 marker 变量上获得函数闭包，但这会增加更多开销）

代码 sn-p：

var map;
var markers = [];
var initialEmptyMarkers = [];
var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

var infowindow = new google.maps.InfoWindow({
  content: "Content"
});

function setMarkers(locations) {

  var bounds = new google.maps.LatLngBounds();

  for (var i = 0; i < locations.length; i++) {
    var loc = locations[i];
    var currentLatLong = new google.maps.LatLng(loc[1], loc[2]);
    var marker = new google.maps.Marker({
      position: currentLatLong,
      map: map,
      index: i,
      animation: google.maps.Animation.DROP,
      title: loc[0],
      zIndex: loc[3]
    });

    bounds.extend(currentLatLong);

    marker.addListener('click', function(e, i) {
      var info = this.index;
      document.getElementById("markerInfo").innerHTML = "<h1>id:" + info + "</h1>";
    });

    // Push marker to markers array
    markers.push(marker);
  }

  map.fitBounds(bounds);
  map.panToBounds(bounds);
}

function reloadMarkers() {

  // Loop through markers and set map to null for each
  for (var i = 0; i < markers.length; i++) {

    markers[i].setMap(null);
  }

  // Reset the markers array
  markers = [];

  // Call set markers to re-add markers
  setMarkers(locations);
}

function initMap() {

  var mapOptions = {
    zoom: 2,
    center: new google.maps.LatLng(10, 12),
    mapTypeId: google.maps.MapTypeId.MAP
  }

  map = new google.maps.Map(document.getElementById('map'), mapOptions);

  // Bind event listener on button to reload markers
  document.getElementById('searchButton').addEventListener('click', reloadMarkers);
}

initMap();

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#search {
  position: absolute;
  top: 150px;
  left: 10px;
  background-color: #fff;
  z-index: 999;
  padding: 20px;
}

#map {
  height: 100%;
  z-index: 1;
}

#markerInfo {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100px;
  width: 100%;
  background-color: #fff;
  padding: 10px;
  z-index: 999;
}

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<div id="map"></div>
<div id="search">
  <input type="button" value="Search" id="searchButton">
</div>
<div id="markerInfo"></div>