Google Maps API v3不会在没有fitbounds的情况下加载，导致无限循环/堆栈溢出 [英] Google Maps API v3 not loading without fitbounds, zooming causing infinite loop/stackoverflow
问题描述
前面的问题在这里：
堆栈溢出Google地图API（IE7 IE8）
我在同一时间发现了以下问题： Google Maps API v3：我可以在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.jpgborder =1class =imagetype1/>< / a> < / A> < / DIV> < div class =nearby-hotel-description l> < a class =nearby-hotel-deschref =/ hotels / ireland / dublin / dublin / young-testing-hotel-liege>都柏林\最奢华的设计酒店坐落在市。在这个别致的天堂里体验两全其美，一边是圣斯蒂芬绿的宁静和平静，另一边是都柏林格拉夫顿街的最佳购物大道。从它的中心位置，在这个热闹闹闹的城市中，您可以轻松漫步探索主要的文化，历史和休闲景点。或者走出去到别致的购物中心，高能量酒吧，高级餐厅和闲聊咖啡馆。< / a> < a href =/ hotels / ireland / dublin / dublin / young-testing-hotel-liegeclass =btn-small>立即预订< / a> < / DIV> < div class =clear>< / div> < / div>'，4]
];
函数初始化（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 = []; （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（{
位置：latLng，
图标：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
}; （marker.length> 1）{
var markerCluster = new MarkerClusterer（map，markers，mcOptions）;
if
map.fitBounds（bounds）;
google.maps.event.addListenerOnce（map，'zoom_changed'，function（）{
var oldZoom = map.getZoom（）;
map.setZoom（oldZoom +（-7）） ; //或者任何
}）;
} 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））; //或者任何
// 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）;
}
函数bindInfoWindow（marker，map，infowindow，html）{
google.maps.event.addListener（marker，'click'，function（）{
infowindow.setContent（html）;
infowindow.open（map，marker）;
}）;
函数initmaps（）{
initialize（'map_canvas'）;
initialize（'map_thumb'）;
}
google.maps.event.addDomListener（window，'load'，initmaps）;
我已经设置了3个testpages来演示这个问题：
http://groupbke.young.netaffinity.net/maptest1.html 这有setZoom（）函数，并抛出一个stackoverflow错误，即使这应该是正确的 http://groupbke.young.netaffinity.net/maptest2.html 除了将标记添加到地图之外，这没有任何作用。 http://groupbke.young.netaffinity.net/maptest3.html 这有fitBound（），理论上它不好，但工作。之后无法调整缩放级别，否则会引发堆栈溢出错误。滚动缩放功能。 我从前一个问题的答案中遗漏的是，初始缩放级别和中心必须 还必须将事件更改为多标记上的空闲 （marker.length> 1）{ 在这之后就像一个魅力一样。 Previous question here:
stack overflow with Google maps API (IE7 IE8)
I found the following question in the mean time: Google Maps API v3: Can I setZoom after fitBounds? The solution there works just fine, when I have more than one marker on the map. However when I visit a subpage of groupbke.young.netaffinity.net eg. https://groupbke.young.netaffinity.net/hotels/ireland/dublin/dublin/young-testing-hotel-liege/specials/bed-and-breakfast
the map will only load if map.fitBounds() is called. On the other hand, even if the map is not loaded, it will throw a stack overflow error when I scroll above the map canvas.
Will throw a stack overflow anyway, if I try to use setZoom. Any ideas? I've set up 3 testpages to demonstrate the problem: http://groupbke.young.netaffinity.net/maptest1.html this has the setZoom() function and throws a stackoverflow error, even though this should be correct http://groupbke.young.netaffinity.net/maptest2.html this does nothing beyond adding the marker to the map. scroll zooming on the map still throws a stack error. http://groupbke.young.netaffinity.net/maptest3.html this has fitBound(), which in theory is not good, but works. can NOT adjust the zoom level after that, or it will throw a stackoverflow error. scroll zooming works. What I was missing from the answer from my previous question was that an initial zoom level and center has to be set. Also had to change the event to 'idle' on the multi marker zooming adjustment. Works like a charm after that. 这篇关于Google Maps API v3不会在没有fitbounds的情况下加载，导致无限循环/堆栈溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
var myOptions = {
mapTypeId：google.maps.MapTypeId.ROADMAP，
mapTypeControl ：false，
zoom：22，
center：new google.maps.LatLng（50.820645，-0.137376）
};
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）） ; //或者任何
}）;
}
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 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
});
}
