[英]Google Maps API V3: getBounds() convert result for fitBounds()
[英]Google Maps Api v3 - getBounds is undefined
我正在从 v2 切换到 v3 谷歌地图 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 中失败。
你能帮我解决这个问题吗?
在 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>
它应该可以工作,至少根据 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());
});
});
看到它在这里工作。
我是说 Salman 的解决方案更好,因为idle
事件比tilesloaded
事件更早地被调用,因为它等待所有的tile 被加载。 但是仔细观察,似乎更早调用了bounds_changed
并且它也更有意义,因为您正在寻找界限,对吧? :)
所以我的解决方案是:
google.maps.event.addListenerOnce(gMap, 'bounds_changed', function(){
alert(this.getBounds());
});
在这里的其他评论中,建议在“空闲”上使用“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);
});
好吧,我不确定我是否为时已晚,但这是我使用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();
添加 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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.