Google Maps Api v3 - getBounds 未定义
[英]Google Maps Api v3 - getBounds is undefined
问题描述
I'm switching from v2 to v3 google maps api and got a problem with gMap.getBounds() function.
我正在从 v2 切换到 v3 谷歌地图 api 并且遇到了gMap.getBounds()函数的问题。
I need to get the bounds of my map after its initialization.我需要在初始化后获取地图的边界。
Here is my javascript code:这是我的 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());
}
);
So now it alerts me that gMap.getBounds() is undefined.所以现在它提醒我gMap.getBounds()是未定义的。
I've tried to get getBounds values in click event and it works fine for me, but I cannot get the same results in load map event.我试图在 click 事件中获取 getBounds 值，它对我来说很好用，但我无法在加载地图事件中获得相同的结果。
Also getBounds works fine while document is loading in Google Maps API v2, but it fails in V3.在 Google Maps API v2 中加载文档时，getBounds 也能正常工作，但在 V3 中失败。
Could you please help me to solve this problem?你能帮我解决这个问题吗？
6 个解决方案
解决方案1
137 已采纳 2010-05-14 09:20:02
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.在 v3 API 的早期， getBounds()方法要求地图图块已完成加载才能返回正确的结果。 However now it seems that you can listen to bounds_changed event, which is fired even before the tilesloaded event:但是现在似乎您可以收听bounds_changed事件，该事件甚至在tilesloaded事件之前就被触发：
<!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>
解决方案2
20 2010-05-14 09:27:33
It should be working, atleast according to the documentation for getBounds().它应该可以工作，至少根据 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());
});
});
解决方案3
15 2010-10-25 00:11:54
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.我是说 Salman 的解决方案更好，因为idle事件比tilesloaded事件更早地被调用，因为它等待所有的tile 被加载。 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?但是仔细观察，似乎更早调用了bounds_changed并且它也更有意义，因为您正在寻找界限，对吧？ :) :)
So my solution would be:所以我的解决方案是：
google.maps.event.addListenerOnce(gMap, 'bounds_changed', function(){
alert(this.getBounds());
});
解决方案4
11 2012-01-11 11:32:04
In other comments here, it's adviced to use the "bounds_changed" event over "idle", which I agree with.在这里的其他评论中，建议在“空闲”上使用“bounds_changed”事件，我同意这一点。 Certainly under IE8 which triggers "idle" before "bounds_changed" on my dev machine at least, leaving me with a reference to null on getBounds.当然，在 IE8 下，它至少在我的开发机器上的“bounds_changed”之前触发“idle”，让我在 getBounds 上引用 null。
The "bounds_changed" event however, will be triggered continuously when you'll drag the map.但是，当您拖动地图时，“bounds_changed”事件将连续触发。 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);
});
解决方案5
1 2013-10-22 19:19:24
Well, i'm not sure if i'm too late, but here's my solution using gmaps.js plugin:好吧，我不确定我是否为时已晚，但这是我使用gmaps.js插件的解决方案：
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();
解决方案6
0 2021-04-15 05:31:20
Adding an answer for 2021.添加 2021 年的答案。
Map.getBounds() may return undefined initially. Map.getBounds()最初可能会返回 undefined 。 The preferred workaround to this is to use the bounds_changed event.对此的首选解决方法是使用bounds_changed事件。 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 https://developers.google.com/maps/documentation/javascript/reference/map#Map.bounds_changed
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.