0

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

4

2 回答 2

2

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

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

在那之后就像一个魅力。

于 2012-08-02T08:30:01.293 回答
0

当您只有一家酒店时，您将创建一个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);
于 2012-08-01T16:19:32.167 回答