Google Maps API：如何放大并为for循环中的多个标记设置不同的中心？

Question

我有一个标记数组，我想编写代码，使用户能够在单击特定标记时放大它。这个循环的问题是，当我运行代码时，无论我点击哪个标记，它都会以最后一个标记的中心放大？我不明白这一点，因为我通过在“marker[i].getPosition()”上设置中心来为每个标记侦听器提供自己的标记中心属性？

这个逻辑有什么问题？

function zoomOnMarker(markers, map) {
        position = new Array(0)
        for (var i = 0; i < markers.length; i++) {
            position.push(markers[i].getPosition());
            markers[i].addListener('click', function () {
                map.setZoom(15);
                map.setCenter(position[i]);
            });
        }
    }

Answer 1

用这种方式试试函数

    var addListenersOnMarker = function(marker, map, position ) {
        google.maps.event.addListener(marker, 'click', function (event) {
                map.setZoom(15);
                map.setCenter(position);

        });  
    };

    function zoomOnMarker(markers, map) {
        position = new Array(0)
        for (var i = 0; i < markers.length; i++) {
            position.push(markers[i].getPosition());
            addListenersOnMarker(marker[i] map, position[i] );
        }
    }

Answer 2

要在监听函数中引用被点击的标记，可以使用this：

function zoomOnMarker(markers, map) {
    for (var i = 0; i < markers.length; i++) {
        markers[i].addListener('click', function () {
            map.setZoom(15);
            map.setCenter(this.getPosition());
        });
    }
}

代码 sn-p：

var gmarkers = [];

function zoomOnMarker(markers, map) {
  for (var i = 0; i < markers.length; i++) {
    markers[i].addListener('click', function() {
      map.setZoom(15);
      map.setCenter(this.getPosition());
    });
  }
}

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < beaches.length; i++) {
    var beach = beaches[i];
    var marker = new google.maps.Marker({
      position: {
        lat: beach[1],
        lng: beach[2]
      },
      map: map,
      title: beach[0]
    });
    bounds.extend(marker.getPosition());
    gmarkers.push(marker);
  }
  map.fitBounds(bounds);
  zoomOnMarker(gmarkers, map);
}
google.maps.event.addDomListener(window, "load", initialize);
var beaches = [
  ['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]
];

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>