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

は、リスナー関数で、クリックされたマーカーを参照するためにこの方法を試してみてください、あなたは使用することができ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()); 
     }); 
    } 
} 

コードスニペット：

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>

Answer 2

機能を

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