Question

上一个问题： 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错误。滚动缩放工作。

Answer 1

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

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

之后就像魅力一样。

Answer 2

如果您只有一家酒店，则创建一个仅包含一个点的LatLngBounds对象：

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

但你做了map.fitBounds(bounds) - 这会尝试无限放大。尽管可以说API应该能够应对这种情况，但同样有争议的是它会尝试完全按照你所说的去做。 IE可能与Firefox和其他浏览器的行为不同。

如果您在问题中的引用代码中注释了fitBounds()，则会出现在您的在线页面中。由于该行仅适用于涉及一个标记且bounds对象为单个点的实例，因此我会将其替换为简单的setZoom()。

map.setZoom(16);

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

2 个答案: