javascript - Google Maps API v3无法在没有Fitbound的情况下加载，缩放会导致无限循环/堆栈溢出

上一个问题在这里：
stack overflow with Google maps API (IE7 IE8)
我在此期间发现以下问题：Google Maps API v3: Can I setZoom after fitBounds?

当我在地图上有多个标记时，那里的解决方案就可以正常工作。但是，当我访问groupbke.young.netaffinity.net的子页面时。 https://groupbke.young.netaffinity.net/hotels/ireland/dublin/dublin/young-testing-hotel-liege/specials/bed-and-breakfast
仅当调用map.fitBounds（）时，地图才会加载。另一方面，即使未加载地图，当我在地图画布上方滚动时，也会引发堆栈溢出错误。
如果我尝试使用setZoom，无论如何都会引发堆栈溢出。

有任何想法吗？

var hoteldata = [
['Young Testing Hotel - Liège', 53.33932, -6.261427, '<div class="nearby-hotel"> <h1><a href="/hotels/ireland/dublin/dublin/young-testing-hotel-liege">Young Testing Hotel - Liège</a></h1> <div class="star-rating-1"></div><div class="clear"></div> <div class="nearby-hotel-image l"> <a href="/hotels/ireland/dublin/dublin/young-testing-hotel-liege"><img src="http://groupbke.young.netaffinity.net/bookings/images/imagecache/3/0C9DBC143E18ED64059C1696A52D2941-60x60.jpg" border="1" class="imagetype1"/></a> </a> </div> <div class="nearby-hotel-description l">  <a class="nearby-hotel-desc" href="/hotels/ireland/dublin/dublin/young-testing-hotel-liege">Dublin\'s most luxurious design hotel is located in the heart of the city. Experience the best of both worlds when staying at this chic haven, to one side the tranquility and calm of St Stephen\'s Green and to the other, Grafton Street, Dublin\'s finest shopping avenue.    From its central location, in amongst this buzzing vibrant city it is an easy stroll to explore the leading cultural, historical and leisure attractions. Or just step out to the chic shopping, high energy bars, fine dining restaurants and chattering Cafes.</a> <a href="/hotels/ireland/dublin/dublin/young-testing-hotel-liege" class="btn-small">Book Now</a> </div> <div class="clear"></div> </div>', 4]
];
function initialize(mapid) {
var myOptions = {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false
};
var bounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById(mapid), myOptions);
var infowindow = new google.maps.InfoWindow();
var markers = [];

for (i = 0; i < hoteldata.length; i++) {
    var latLng = new google.maps.LatLng(hoteldata[i][1], hoteldata[i][2]);
    bounds.extend(latLng);
    var img = '/images/hotel-marker.png';
    if (hoteldata[i][4] == 2) {
        img = '/images/country-marker.png';
    }
    if (hoteldata[i][4] == 3) {
        img = '/images/guesthouse-marker.png';
    }
    if (hoteldata[i][4] == 4) {
        img = '/images/hotel-self-marker.png';
    }
    var marker = new google.maps.Marker({
    position: latLng,
    icon: img,
    shadow: '/images/marker-shadow.png'
    });
    markers.push(marker);
    bindInfoWindow(marker, map, infowindow, hoteldata[i][3]);

}

var clusterStyles = [
  {
    opt_textColor: 'white',
    url: '/images/m3-blue.png',
    height: 65,
    width: 64
  },
 {
    opt_textColor: 'white',
    url: '/images/m3-green.png',
    height: 65,
    width: 64
  },
 {
    opt_textColor: 'white',
    url: '/images/m3-orange.png',
    height: 65,
    width: 64
  }
];

var mcOptions = {
    styles: clusterStyles,
    maxZoom:14

};


if (markers.length>1){
    var markerCluster = new MarkerClusterer(map, markers, mcOptions);
    map.fitBounds(bounds);
    google.maps.event.addListenerOnce(map, 'zoom_changed', function() {
            var oldZoom = map.getZoom();
            map.setZoom(oldZoom + (-7)); //Or whatever
    });
} else if (markers.length == 1){
    markers[0].setMap(map);
    //google.maps.event.clearListeners(map, 'zoom_changed');
    //google.maps.event.addListenerOnce(map, 'zoom_changed', function() {
        //  var oldZoom = map.getZoom();
        //  map.setZoom(oldZoom + (-7)); //Or whatever
    //  setTimeout('roomSetter(globalmap,globalzoom)',300);
    //});
    //google.maps.event.trigger(map,'zoom_changed');
    //google.maps.event.clearListeners(map, 'zoom_changed');
    //map.fitBounds(bounds);
    //var oldZoom = map.getZoom();
    //map.setCenter(bounds.getCenter());
    //map.setZoom(oldZoom+(-7));
    //map.setZoom(3);
    //globalmap=map;
    //globalzoom=map.getZoom()+(-7);
    //setTimeout('zoomSetter(globalmap,globalzoom)',300);
}
}

var globalmap;
var globalzoom;

function zoomSetter(map, zoom){
//map.setZoom(zoom);
}

function bindInfoWindow(marker, map, infowindow, html) {
google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(html);
    infowindow.open(map, marker);
    });
}

function initmaps() {
initialize('map_canvas');
initialize('map_thumb');
}

google.maps.event.addDomListener(window, 'load', initmaps);

我设置了3个测试页来演示该问题：

http://groupbke.young.netaffinity.net/maptest1.html

它具有setZoom（）函数并引发stackoverflow错误，即使这应该是正确的

http://groupbke.young.netaffinity.net/maptest2.html

除了将标记添加到地图外，此操作无济于事。在地图上滚动缩放仍会引发堆栈错误。

http://groupbke.young.netaffinity.net/maptest3.html

这有fitBound（），理论上这不好，但是可以用。此后无法调整缩放级别，否则将引发stackoverflow错误。滚动缩放作品。

最佳答案

我上一个问题的答案中缺少的是必须设置初始缩放级别和中心。

    var myOptions = {
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false,
            zoom:22,
            center: new google.maps.LatLng(50.820645,-0.137376)
    };

还必须在多标记缩放调整中将事件更改为“空闲”。

if (markers.length>1){
    var markerCluster = new MarkerClusterer(map, markers, mcOptions);
    map.fitBounds(bounds);
    google.maps.event.addListenerOnce(map, 'idle', function() {
        var oldZoom = map.getZoom();
        map.setZoom(oldZoom + (-7)); //Or whatever
    });
}

在那之后就像魅力一样。