Google Maps Api v3 - getBounds не определено


83

Я переключаюсь с v2 на v3 API карт Google, и у меня возникла проблема с 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()это не определено.

Я пытался получить значения getBounds в событии щелчка, и он отлично работает для меня, но я не могу получить те же результаты в событии карты загрузки.

Также getBounds отлично работает при загрузке документа в Google Maps API v2, но не работает в V3.

Не могли бы вы помочь мне решить эту проблему?

Ответы:


136

В первые дни использования 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>

1
Это именно то, что мне нужно! спасибо =). Это решило мою проблему.
— DolceVita,

это очень полезно для меня, я почти потратил на это 2 часа
— arjuncc

Спасибо! Мне это очень
— помогло

Это также может быть полезно stackoverflow.com/questions/832692/…
— dav 08

1
Как бы то ни было, я обнаружил, что на телефонах Android getBounds недоступен после первого вызова bounds_changed, но доступен после последующих. Изменение его на загруженные плитки исправило это (хотя сделано для некоторых уродливых обновлений).
— Крис Рэй

20

Он должен работать, по крайней мере, согласно документации для 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());
    });
});

Смотрите его работать здесь .


Это должен быть принятый ответ. idle вызывается раньше, чем нужно ждать загрузки всех плиток.
— Treznik

@treznik: Как вы определили, что idleмероприятие запускается перед tilesloadedсобытием? Для меня tilesloadedсобытие постоянно срабатывает перед idleсобытием.
— Даниэль Вассалло

это именно то, что я искал
— arjuncc

Это лучшее решение, если вам нужно, чтобы функция запускалась только один раз.
— bbodenmiller

15

Я говорил, что решение Салмана лучше, потому что idleсобытие вызывается раньше, чем событие tilesloaded, поскольку оно ожидает загрузки всех плиток. Но при более внимательном рассмотрении кажется, что это вызвано bounds_changedеще раньше, и это также имеет больше смысла, поскольку вы ищете границы, верно? :)

Итак, мое решение было бы:

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

1
Когда этот вопрос был задан, bounds_changedне сработало бы, поскольку getBounds()требовалось загрузить плитки. +1 за предложение. Я обновлю свой ответ.
— Даниэль Вассалло

11

В других комментариях здесь рекомендуется использовать событие «bounds_changed» вместо «idle», с чем я согласен. Конечно, в IE8, который запускает "idle" перед "bounds_changed", по крайней мере, на моей машине разработчика, оставляя мне ссылку на null в getBounds.

Однако событие «bounds_changed» будет запускаться постоянно, когда вы перетаскиваете карту. Поэтому, если вы хотите использовать это событие для начала загрузки маркеров, это будет сильно загружать ваш веб-сервер.

Мое решение этой проблемы с несколькими браузерами:

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

1
Я использую этот метод по тем же причинам :-)
— oodavid

1

Я не уверен, что опоздал, но вот мое решение с использованием плагина 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();
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.