Google Maps Api v3 - getBounds - undefined
Я перехожу с 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()
- undefined.
Я попытался получить значения getBounds в событии click, и он отлично работает для меня, но я не могу получить те же результаты в событии карты загрузки.
Также getBounds отлично работает при загрузке документа в API Карт Google v2, но он не работает в V3.
Не могли бы вы помочь мне решить эту проблему?
Ответы
Ответ 1
В первые дни API v3 метод 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
Он должен работать, по крайней мере, согласно документации для 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());
});
});
Посмотрите, как работает здесь.
Ответ 3
Я говорил, что решение Salman лучше, потому что событие idle
вызывается раньше, чем tilesloaded
, так как оно ожидает, что все плитки будут загружены. Но при более близком рассмотрении, кажется, bounds_changed
называется еще раньше, и это также имеет больше смысла, поскольку вы ищете границы, не так ли?:)
Итак, мое решение будет:
google.maps.event.addListenerOnce(gMap, 'bounds_changed', function(){
alert(this.getBounds());
});
Ответ 4
В других комментариях здесь рекомендуется использовать событие "bounds_changed" по "idle", с которым я согласен. Разумеется, в IE8, который, по крайней мере, запускает "простоя" до "bounds_changed" на моей машине dev, оставляя ссылку со ссылкой на null на getBounds.
Событие "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();