Google Maps Api v3 - getBounds не визначено


83

Я переходжу з 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()невизначено.

Я намагався отримати значення getBounds у події click, і це добре працює для мене, але я не можу отримати однакові результати в події навантаження карти.

Також getBounds чудово працює під час завантаження документа в Google Maps API v2, але не вдається у V3.

Не могли б ви допомогти мені вирішити цю проблему?

Відповіді:


136

На початку API 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

Дякую! Мені це дуже допомогло
— user15,

Це може бути корисно також stackoverflow.com/questions/832692/…
— дани

1
Для чого це варто, я виявив, що на телефонах Android getBounds недоступний після першого дзвінка до bounds_changed, але є після наступних. Змінивши його на плитку, завантажену, це виправлено (хоча це зроблено для деяких потворних оновлень).
— Chris Rae,

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.