javascript - map fitBounds() 放大到数组中的最后一个标记

Question

我有一个谷歌地图边界函数运行如下:

function intializeCustom() {
    var map = new google.maps.Map(document.getElementById('map-dir'), {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    });
    for (i = 0; i < markers.length; i++) {
        var circle = new google.maps.Circle({
            map: map,
            radius: 3000,
            fillColor: '#2c3e50'
        });
        var bounds = new google.maps.LatLngBounds();
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0]
        });
        circle.bindTo('center', marker, 'position');
        google.maps.event.addListener(circle, 'click', function(ev) {
            placeMarker(ev.latLng); //some function to place markers
        });
        bounds.extend(position);
        map.fitBounds(bounds);
    }
}

除了边界之外，一切正常。渲染时的 map 会放大 markers 数组中最后一个可用的标记。知道出了什么问题吗？

Answer 1

您在每次迭代时都会创建一个新的 LatLngBounds，因此当您对其调用 extend() 时，您将始终获得覆盖当前标记的范围。

只需将声明移到循环之前，它就应该可以工作。

var bounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
    ...
}