Javascript Google Maps API v3未无限制加载，缩放导致无限循环/堆栈溢出

上一个问题： 同时，我发现了以下问题：

当我在地图上有一个以上的标记时，那里的解决方案工作得很好。然而，当我访问groupbke.young.netaffinity.net的子页面时，例如。 仅当调用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);

var hoteldata=[
[Young Testing Hotel-Liège'，53.33932，-6.261427'，4]
];
函数初始化（mapid）{
变量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标记=[]；
对于（i=0；i1）{
var markerCluster=新的MarkerClusterer（映射、标记、mcOptions）；
映射边界（bounds）；
google.maps.event.addListenerOnce（map'zoom_changed'，function（）{
var oldZoom=map.getZoom（）；
setZoom（oldZoom+（-7））；//或者其他什么
});
}else if（markers.length==1）{
标记[0]。设置映射（映射）；
//google.maps.event.clearListeners（映射“zoom_changed”）；
//google.maps.event.addListenerOnce（map'zoom_changed'，function（）{
//var oldZoom=map.getZoom（）；
//setZoom（oldZoom+（-7））；//或者其他什么
//setTimeout（'roomSetter（globalmap，globalzoom）'300）；
//});
//google.maps.event.trigger（map，'zoom_changed'）；
//google.maps.event.clearListeners（映射“zoom_changed”）；
//映射边界（bounds）；
//var oldZoom=map.getZoom（）；
//map.setCenter（bounds.getCenter（））；
//map.setZoom（oldZoom+（-7））；
//map.setZoom（3）；
//全球地图=地图；
//globalzoom=map.getZoom（）+（-7）；
//setTimeout（'zoomSetter（globalmap，globalzoom）'300）；
}
}
var globalmap；
var-globalzoom；
功能zoomSetter（地图、缩放）{
//map.setZoom（缩放）；
}
函数bindInfoWindow（标记、映射、信息窗口、html）{
google.maps.event.addListener（标记'click'，函数（）{
setContent（html）；
信息窗口。打开（地图、标记）；
}); 
} 
函数initmaps（）{
初始化（'map_canvas'）；
初始化（'map_thumb'）；
}
google.maps.event.addDomListener（窗口'load'，initmaps）；

我已经设置了3个测试页面来演示这个问题：

这有setZoom（）函数，并抛出stackoverflow错误，即使这应该是正确的

除了将标记添加到地图之外，这没有任何作用。在地图上滚动缩放仍会引发堆栈错误

---

这有fitbind（），理论上不好，但有效。之后无法调整缩放级别，否则会引发堆栈溢出错误。滚动缩放有效。

当您只有一家酒店时，您将创建一个仅包含一个点的

LatLngBounds

对象：

for (i = 0; i < hoteldata.length; i++) {
    var latLng = new google.maps.LatLng(hoteldata[i][1], hoteldata[i][2]);
    bounds.extend(latLng);
...}

---

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

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

---

在那个之后，你的链接很有魅力。

你的链接出现了重大问题（和地图无关，看起来它无法加载很多外部文件，包括所需的css）：你的证书无效（错误的站点）并且过期（一年前过期），所以浏览器无法通过HTTPS进行连接。对不起，我一直在试图找到一个解决方案，有轻微的变化和大量的评论的东西。实际上，与fitBounds（）一样，它在IE和FF上也可以正常工作。问题是没有fitBounds（），我没有显示任何内容，它会导致循环和堆栈溢出。放入setZoom（）将触发loadFine上的溢出。你能提供一个指向演示者的链接吗？它不必是你网站上的一个真正的实时页面；它可能是一个临时页面。无论哪种情况，请确保（a）您不玩代码；（b） 问题中引用了足够多的代码来创建一个独立的演示程序，该演示程序也将失败。谢谢，在问题末尾添加3个链接。我不会玩那些。

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