谷歌地图 Api v3-getBounds 是未定义的

我从 v2切换到 v3谷歌地图应用程序接口，并得到了一个与 gMap.getBounds()函数的问题。

在初始化映射之后，我需要得到它的边界。

下面是我的 javascript 代码:


var gMap;
$(document).ready(


function() {


var latlng = new google.maps.LatLng(55.755327, 37.622166);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
gMap = new google.maps.Map(document.getElementById("GoogleMapControl"), myOptions);


alert(gMap.getBounds());
}
);

所以现在它提醒我 gMap.getBounds()是未定义的。

我已经尝试过在 click 事件中获取 getBounds 值，它对我来说工作得很好，但是在加载映射事件中无法获得相同的结果。

在 GoogleMapsAPI v2中加载文档时，getBounds 也能正常工作，但是在 V3中失败了。

你能帮我解决这个问题吗？

82716 次浏览
小开
最佳答案

In the early days of the v3 API, the getBounds() method required the map tiles to have finished loading for it to return correct results. However now it seems that you can listen to bounds_changed event, which is fired even before the tilesloaded event:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps v3 - getBounds is undefined</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 350px;"></div>


<script type="text/javascript">
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: new google.maps.LatLng(55.755327, 37.622166),
mapTypeId: google.maps.MapTypeId.ROADMAP
});


google.maps.event.addListener(map, 'bounds_changed', function() {
alert(map.getBounds());
});
</script>
</body>
</html>
小开

It should be working, atleast according to the documentation for getBounds(). Nevertheless:

var gMap;
$(document).ready(function() {
var latlng = new google.maps.LatLng(55.755327, 37.622166);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
gMap = new google.maps.Map(document.getElementById("GoogleMapControl"), myOptions);
google.maps.event.addListenerOnce(gMap, 'idle', function(){
alert(this.getBounds());
});
});

See it working here.

小开

I was saying Salman's solution is better because the idle event is called earlier than the tilesloaded one, since it waits for all the tiles to be loaded. But on a closer look, it seems bounds_changed is called even earlier and it also makes more sense, since you're looking for the bounds, right? :)

So my solution would be:

google.maps.event.addListenerOnce(gMap, 'bounds_changed', function(){
alert(this.getBounds());
});
小开

In other comments here, it's adviced to use the "bounds_changed" event over "idle", which I agree with. Certainly under IE8 which triggers "idle" before "bounds_changed" on my dev machine at least, leaving me with a reference to null on getBounds.

The "bounds_changed" event however, will be triggered continuously when you'll drag the map. Therefor, if you want to use this event to start loading markers, it will be heavy on your webserver.

My multi browser solution to this problem:

google.maps.event.addListenerOnce(gmap, "bounds_changed", function(){
loadMyMarkers();
google.maps.event.addListener(gmap, "idle", loadMyMarkers);
});
小开

Well, i'm not sure if i'm too late, but here's my solution using gmaps.js plugin:

map = new GMaps({...});


// bounds loaded? if not try again after 0.5 sec
var check_bounds = function(){


var ok = true;


if (map.getBounds() === undefined)
ok = false;


if (! ok)
setTimeout(check_bounds, 500);
else {
//ok to query bounds here
var bounds = map.getBounds();
}
}


//call it
check_bounds();
小开

Adding an answer for 2021.

Map.getBounds() may return undefined initially. The preferred workaround to this is to use the bounds_changed event. Typically, an undefined value will only happen in the initialization of the map and never again.

const map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: new google.maps.LatLng(55.755327, 37.622166),
mapTypeId: google.maps.MapTypeId.ROADMAP
});


map.addEventListener('bounds_changed', () => {
console.log(map.getBounds());
});

https://developers.google.com/maps/documentation/javascript/reference/map#Map.bounds_changed


提交答案