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.

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

javascript google-maps google-maps-api-3 Сладкая жизнь
источник

Ответы:

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();
Фернандо
источник