Fedezze fel a Google térképeket api-t
Ma kezdtem el tanulni a Google Térkép API-t. Szükséges Moszkva térképet készíteni a jelekkel, amikor rákattintva az ott található tárgyakat leíró oldalakra ugrik. Mint kiderült, mindent rendkívül egyszerű. De megmondom a sorrendben.
1. lépés: Töltse le a Google Térkép API szkriptjét:
A hivatalos dokumentációban ezt javasoljuk a fejrészen belül, de ha betölti a forgatókönyvet a testből (esetemben jobb volt), minden működik. A paraméterérzékelő = false azt jelenti, hogy a GPS-eszközöknek nem kell meghatározniuk a felhasználó aktuális helyét.
2. lépés: Hozzon létre egy területet a térkép megjelenítéséhez
Mint látható, ez normális div. Ha meg szeretné mutatni a térképet az egész ablakban, írhat a stílusokba:
3. lépés: Kapcsolja be a térképet
Ehhez először létre kell hozni egy LatLng objektumot a pont koordinátáival, amely a térkép közepén jelenik meg:
A földrajzi hosszúság és szélesség koordináták. A rendszeres Google-térkép segítségével megtalálhatja őket: megtalálja a megfelelő helyet a térképen, kattintson rá a jobb egérgombbal, és válassza a "Mi itt van" lehetőséget. A koordináták a keresősávban jelennek meg.
Most állítsuk be a térkép egyéb tulajdonságait:
Van zoom - kezdeti mashstab (10 csak a dolog, hogy bemutassák a része Moszkva a körgyűrű) a központban jelzi objektum koordinátáinak a középső pont, és mapTypeId beállítja a kezdeti térkép nézet (ebben az esetben a kiválasztott normál térkép is lehetőség SATELLITE - műholdas nézet, HYBRID és TERRAIN).
Végül töltsd be a kártyát:
Az első paraméter itt a DOM objektum, amelyben a térkép lesz rajzolva, a második a fenti beállítások.
4. lépés: Jelölje be a jelölőt
Ismét létre hozunk egy objektumot egy ponttal, amelyre a marker megmutatja:
Adja hozzá a jelölőt az előző lépésben betöltött térképhez:
Itt a pozíció egy olyan objektum, amelynek koordinátái vannak, a térkép a térkép, amelyhez hozzá kívánja adni, és a cím egy olyan tipp, amely akkor jelenik meg, ha a mutató fölé mutat.
5. lépés: Átkattintási átmenet hozzáadása
A kattintásokra, a dupla kattintásra, a térképméret változtatásaira és más hasonló eseményekre a kezelők a google.maps.event objektum használatával kerülnek hozzáadásra:
Itt az addListener metódus első paramétere egy olyan objektum, amelyhez egy esemény hozzáadódik (ilyen objektum lehet egy marker vagy maga a térkép), a második az esemény típusa (egyetlen kattintás ebben az esetben), a harmadik pedig a kezelő funkció.
Ez minden! Csak a funkció és a parancsfájl bezárása maradt:
Add meg az inicializálási függvény hívását az onLoad eseményhez:
Nem találom az interneten, mivel most az időzítő frissíti a pont koordinátáit a mozgás / dorisovkoy térképekkel? (Nem szeretném frissíteni az egész oldalt, tervezem az ajax kérelmet a szerverre, hogy friss koordinátákat kapjon.) Api, hogy a Yandexben a Google-ban túl nagy, és lehetetlen a célzott módszerrel megtalálni a célt)
és hogy ne nyúljon kétszer: ha a saját nyíl ikonját használja, megváltoztathatom a szöget (van egy irányú azimut)
Mozgatáshoz / festéshez a metódus vagy a PanTo vagy panToBounds a térképek objektumának (az első egy új pontot helyez a középpontba, a második - a térkép minimális elmozdulását úgy, hogy a pont látható legyen).
Ie Példámban ez a következőképpen néz ki: mosocw.panToBounds (55,36.5);
És a pont koordinátáinak megváltoztatásához elméletben ez a következő: marker.setPosition = new google.maps.LatLng (55.763525,37.560893).
Ami a nyíl szögét illeti, kétlem, hogy ez lehetséges. Inkább egy ikonkészletet kell készítenie, és a kívánt nyíl irányába kell választania.
És ha a központ az Északi-sarkon van, akkor valószínűleg nem elég, hogy ebben a helyzetben csak a központ koordinátáit állítsd be, de valószínűleg valami másra van szükséged, mint a vetítési változás típusát. De mi ehhez szükséges?