Uncaught RangeError: Maximum call stack size exceeded when I use google maps

Uncaught RangeError: Maximum call stack size exceeded when I use google maps

我正在尝试使用 google 地图和标记编写简单的示例,但我遇到了错误:

Uncaught RangeError: Maximum call stack size exceeded

js:

$(document).ready(function() {
    var map;
    var elevator;
    var myOptions = {
        zoom: 1,
        center: new google.maps.LatLng(0, 0),
        mapTypeId: 'terrain'
    };
    map = new google.maps.Map($('#map_canvas')[0], myOptions);

    var markers = [];
    coords = [{
        lat: 55,
        lng: 37
    }];
    for (var x = 0; x < coords.length; x++) {
        var latlng = new google.maps.LatLng(x.lat, x.lng);
        var marker = new google.maps.Marker({
            position: latlng,
            map: map
        });
        markers.push(marker);


    }

    fitBounds();

    function fitBounds() {
        var bounds = calculateBounds();
        if (bounds != undefined) {
            map.fitBounds(bounds);
        }
    }

    function calculateBounds() {
        var allMarkers = markers;
        if (allMarkers.length > 0) {
            var bounds = new google.maps.LatLngBounds();
            for (i = 0; i < allMarkers.length; i++) {
                bounds.extend(allMarkers[i].getPosition());
            }
        }
        return bounds;
    }

});

fiddle

调用 fitBounds 时出现错误 Uncaught RangeError: Maximum call stack size exceeded 通常意味着您使用无效的 google.maps.LatLng 对象调用了 bounds.extend

这是不正确的(x.lat 和 x.lng 未定义):

for (var x = 0; x < coords.length; x++) {
    var latlng = new google.maps.LatLng(x.lat, x.lng);
    var marker = new google.maps.Marker({
        position: latlng,
        map: map
    });
    markers.push(marker);
}

它产生 latlng lat: NaN, lng: NaN

无效。

应该是:

for (var x = 0; x < coords.length; x++) {
    var latlng = new google.maps.LatLng(coords[x].lat, coords[x].lng);
    var marker = new google.maps.Marker({
        position: latlng,
        map: map
    });
    markers.push(marker);
}

updated fiddle