Google Maps Api v3 - getBounds 未定义
Posted
技术标签:
【中文标题】Google Maps Api v3 - getBounds 未定义【英文标题】：Google Maps Api v3 - getBounds is undefined 【发布时间】：2011-02-19 10:20:51 【问题描述】：我正在从 v2 切换到 v3 google maps api，并遇到了 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 值，它对我来说效果很好，但在加载地图事件中我无法获得相同的结果。
在 Google Maps API v2 中加载文档时，getBounds 也可以正常工作，但在 V3 中却失败了。
你能帮我解决这个问题吗？
【问题讨论】：
【参考方案1】：在 v3 API 的早期，getBounds() 方法要求地图图块已完成加载，才能返回正确的结果。但是现在您似乎可以收听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 个小时 谢谢！对我帮助很大 这也很有用***.com/questions/832692/… 对于它的价值，我发现，在 android 手机上，getBounds 在 first 调用 bounds_changed 之后不可用，但在后续调用之后可用。将其更改为 tilesloaded 修复了该问题（尽管进行了一些丑陋的刷新）。【参考方案2】：至少根据 getBounds() 的文档，它应该可以工作。尽管如此：
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());
);
);
看到它在工作here。
【讨论】：
这应该是公认的答案。比必须等待加载所有图块更早地调用空闲。 @treznik：你是如何确定idle 事件在tilesloaded 事件之前触发的？对我来说，tilesloaded 事件在idle 事件之前不断触发。
这正是我想要的
如果您只需要函数运行一次，这是更好的解决方案。【参考方案3】：
我是说 Salman 的解决方案更好，因为 idle 事件比 tilesloaded 更早调用，因为它等待加载所有图块。但仔细一看，似乎bounds_changed 被更早地调用了，而且它也更有意义，因为你正在寻找边界，对吧？ :)
所以我的解决方案是：
google.maps.event.addListenerOnce(gMap, 'bounds_changed', function()
alert(this.getBounds());
);
【讨论】：
当被问到这个问题时，bounds_changed 不会起作用，因为getBounds() 需要加载磁贴。 +1 建议。我会更新我的答案。【参考方案4】：
在这里的其他 cmets 中，建议在“idle”上使用“bounds_changed”事件，我同意这一点。当然，在 IE8 下，它至少在我的开发机器上的“bounds_changed”之前触发“idle”，让我在 getBounds 上引用 null。
但是，“bounds_changed”事件将在您拖动地图时连续触发。因此，如果您想使用此事件来开始加载标记，它将对您的网络服务器造成负担。
我对这个问题的多浏览器解决方案：
google.maps.event.addListenerOnce(gmap, "bounds_changed", function()
loadMyMarkers();
google.maps.event.addListener(gmap, "idle", loadMyMarkers);
);
【讨论】：
这是我采用的方法，原因相同:-)【参考方案5】：好吧，我不确定我是否为时已晚，但这是我使用 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】：添加 2021 年的答案。
Map.getBounds() 最初可能会返回 undefined。首选的解决方法是使用bounds_changed 事件。通常情况下，未定义的值只会在地图初始化时发生，以后不会再发生。
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
【讨论】：
以上是关于Google Maps Api v3 - getBounds 未定义的主要内容，如果未能解决你的问题，请参考以下文章
Google Maps v3 - 防止 API 加载 Roboto 字体
Google Maps API V3 错误：RefererDeniedMapError
google maps js v3 api教程 -- 创建一个地图
JavaScript Google Maps API V3 Javascript基本示例