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.