Nie działa getBounds(), dlaczego?

pytanie zadane 6 stycznia 2016 w JavaScript przez Klik Obywatel (1,540 p.)

Witam.

Dlaczego w poniższym kodzie nie działa mi polecenie getBounds()? Cały czas wyrzuca mi błąd undefind.

function mapaStart()
{
    var opcjeMapy =
    {
        zoom: 5,
        center: new google.maps.LatLng(53.45211,13.3921124),
        mapTypeId: google.maps.MapTypeId.SATELLITE,
        disableDefaultUI: true
    };
   var mapa 	= new google.maps.Map(document.getElementById("mapka"), opcjeMapy);



    var obszar = mapa.getBounds();

    var lewyDolny = obszar.getSouthWest();
    var prawyGorny = obszar.getNorthEast();


    var lewo 	= lewyDolny.lng();
    var prawo 	= prawyGorny.lng();
    var gora 	= prawyGorny.lat();
    var dol		= lewyDolny.lat();


    var prawyDolny 	= new google.maps.LatLng(dol,prawo);
    var lewyGorny	= new google.maps.LatLng(gora,lewo);

    var srodek = mapa.getCenter();

    console.log(obszar);

}
mapaStart();

I kod HTML.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://maps.google.com/maps/api/js" type="text/javascript"></script>
</head>
<body>
<div id="mapka" style="width: 700px; height: 500px; border: 1px solid black; background: black;">

</div>

<script src="es6.js"></script>
</body>
</html>

Z tego co widziałem na stronie google to wszystko robię poprawnie a mimo to nie działa.

Dziękuję

1 odpowiedź

odpowiedź 6 stycznia 2016 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 6 stycznia 2016 przez Klik

Najlepsza

Może mapa jeszcze nie zdąży się wczytać, a Ty już chcesz coś z niej pozyskać? Umieść getBounds() w funkcji, która będzie wywoływana callback'iem. Callback podaj do funkcji, która pobiera mapę - więc gdy ona zakończy działanie, to wywoła Ci funkcję, w której masz getBounds().

Powinno działać... jeśli oczywiście tu tkwi problem :)

Albo spróbuj podpiąć to pod bounds_change Listenera:

http://stackoverflow.com/a/2833015/4983840

google.maps.event.addListener(mapa, 'bounds_changed', function() {
         alert(mapa.getBounds());
      });

komentarz 6 stycznia 2016 przez Klik Obywatel (1,540 p.)

Tak. Masz rację. Mapa się jeszcze nie zdążyła wczytać a ja już chciałem pobierać dane. Dzięki za podpowiedź.

Po podpięciu do zdarzenia działa.

A czy mógłbyś mi napisać, jak mniej więcej taka funkcja callback by wyglądała.

Dziękuję

komentarz 6 stycznia 2016 przez ScriptyChris Mędrzec (190,190 p.)

Prosty przykład użycia callback

http://burczu-programator.pl/blog/javascript-metody-obiektu-jako-callback

komentarz 6 stycznia 2016 przez Klik Obywatel (1,540 p.)

No dobra wszystko jasne, tylko nie bardzo wiem jak sprawdzić czy mapa się już załadowała i mogę odpalić getBounds()?

komentarz 6 stycznia 2016 przez ScriptyChris Mędrzec (190,190 p.)

A która funkcja w Twoim kodzie jest odpowiedzialna za ładowanie mapy? Na końcu tej funkcji umieść callback, lub po prostu wywołaj funkcję, w której umieścisz pobieranie danych (getBounds).

Coś takiego:

var obszar;
var mapa = function()
{
    /* jakies instrukcje */

  // na koncu umiesc
 pokazObszar();

}

function pokazObszar()
{
  obszar = .....getBounds();
}

Z callback będzie o tyle "gorzej", że funkcję mapa(), musiałbyś wywołać z parametrem callback - nie wiem jak to u Ciebie dokładnie wygląda. Ale jeśli pobierasz mapę z Google API, to tam już dodając skrypt, na końcu masz callback.

Nie umiem tego inaczej wytłumaczyć, sorry.

komentarz 6 stycznia 2016 przez Klik Obywatel (1,540 p.)

Wcześniej robiłem tak jak napisałeś powyżej ale mimo to nie zdążyło pobrać mapy zanim odpaliła się funkcja pokazObszar. Obszedłem to w ten sposób że odpalanie funkcji pokazObszar wrzuciłem do setTimeout na 100ms i to wystarczyło.

Ten callback na końcu skryptu google API powoduje tylko że reszta strony jest dalej ładowana a nie czeka aż API się całe załaduje. Więc w tym wypadku nic mi to nie daje.

U mnie cały skrypt wygląda w ten sposób:

var mapa; 	

function mapaStart()
{
    var opcjeMapy =
    {
        zoom: 5,
        center: new google.maps.LatLng(53.45211,13.3921124),
        mapTypeId: google.maps.MapTypeId.SATELLITE,
        disableDefaultUI: true
    };
    mapa 	= new google.maps.Map(document.getElementById("mapka"), opcjeMapy);
    dymek 	= new google.maps.InfoWindow();
   setTimeout(pokazWspolrzedne,100);
}

function pokazWspolrzedne()
{
    var obszar = mapa.getBounds();
    console.log(obszar);
}
mapaStart();

komentarz 6 stycznia 2016 przez ScriptyChris Mędrzec (190,190 p.)
edycja 6 stycznia 2016 przez ScriptyChris

Jeśli chciałbyś to zrobić z wykorzystaniem callback, to w miejscu wywołania funkcji mapaStart(), musisz jej podać jako parametr nazwę funkcji, która ma zostać wykonana gdy zakończy się jej działanie - czyli gdy mapaStart() zakończy działanie, to wywoła funkcje pokazWspolrzedne() poprzez callback

function mapaStart(callback)
{
    /* jakis kod */

   callback();    // przekazales jako callback funkcje pokazWspolrzedne(), wiec zostanie ona tutaj wywolana
}

mapaStart(pokazWspolrzedne); // w miejscu wywolania funkcji mapaStart(), podajesz jej jako parametr nazwe funkcji (bez nawiasow!), ktora chcesz wykonac jako callback - w tym przypadku funkcje pokazWspolrzedne()

Przykład (mam nadzieję, że zrozumiesz):

https://jsfiddle.net/unxv2usq/

komentarz 7 stycznia 2016 przez Klik Obywatel (1,540 p.)

Tak przykład oczywiście rozumiem, tylko tak jak pisałem pomimo zastosowania callbacku to i tak mapa nie zostaje wczytana.
Tak ja to ma miejsce w moim poniższym kodzie.

var mapa;   
 
function mapaStart(callback)
{
    var opcjeMapy =
    {
        zoom: 5,
        center: new google.maps.LatLng(53.45211,13.3921124),
        mapTypeId: google.maps.MapTypeId.SATELLITE,
        disableDefaultUI: true
    };
    mapa    = new google.maps.Map(document.getElementById("mapka"), opcjeMapy);
    dymek   = new google.maps.InfoWindow();
   callback();
}
 
function pokazWspolrzedne()
{
    var obszar = mapa.getBounds();
    console.log(obszar);
}
mapaStart(pokazWspolrzedne);

komentarz 7 stycznia 2016 przez ScriptyChris Mędrzec (190,190 p.)

To by znaczyło, że w funkcji mapaStart() coś nie zdąży się wykonać, a callback już jest odpalany. Musiałbyś sprawdzić, co w tej funkcji nie zdąża się załadować :) Np. w ciele funkcji mapaStart(), przed wywołaniem callbacka, wpisz to:

if (mapa) console.log('mapa is loaded');
if (dymek) console.log('dymek is loaded');

Jeśli któryś z komunikatów wyświetli się, to znaczy, że dana zmienna nie zwraca 'undefined', null, 0, false, NaN lub nie jest pustym stringiem (czyli "została załadowana", lub ma wartość true). Podobnie możesz sprawdzić klucze dla obiektu opcjeMapy{}.

Jeśli okaże się, że wszystko jest ok, to nie wiem o co chodzi.

komentarz 9 stycznia 2016 przez Klik Obywatel (1,540 p.)

No i okazuje się że wszystko jest ok. Oba komunikaty się wyświetlają a zmienna obszar dalej jest undefined.

No nic dzięki za próbę pomocy. Obejdę ten problem przez zastosowanie setTimeout.

Pozdrawiam

komentarz 9 stycznia 2016 przez ScriptyChris Mędrzec (190,190 p.)

Oba komunikaty się wyświetlają a zmienna obszar dalej jest undefined.

Hmm... To spróbuj tak:

if (mapa) console.log('mapa ', mapa);
if (dymek) console.log('dymek ', dymek);

Jeśli wyświetli obie zmienne, to wtedy zrób tak:

if (mapa && dymek)
{
   callback();
}

To mój ostatni pomysł, jak by to uruchomić z callback'a. Chociaż jeszcze można by sprawdzić "gotowość" obiektu opcjeMapy{}; ale nie wiem jak.

komentarz 9 stycznia 2016 przez Klik Obywatel (1,540 p.)

Dalej kupa. Pewnie jest tak jak napisałeś w pierwszym poście. O ile wszystko "w teorii" się wczytało to nadal brakuje pewnie jakichś elementów które nie pozwalają na pobranie getBounds. Więc lepiej skorzystać z tego listenera 'bounds_changed' i przy jego pomocy odpalić getBounds.

Dzięki za pomoc.

komentarz 9 stycznia 2016 przez ScriptyChris Mędrzec (190,190 p.)

Wolałbym jednak wiedzieć (dla siebie, w razie czego na przyszłość) - dlaczego z callback to nie działa :)

Czy jak podpinasz Google API, to tam na końcu masz callback (w linku)? Jeśli jest, a powinien być, to do której funkcji on się odnosi? Może w tamtej funkcji trzeba zawrzeć na końcu callback?