Astăzi am început să învăț API-ul Google Maps. A fost necesar să se facă o hartă a Moscovei cu mărci, când se dă click pe care vor merge la paginile care descriu obiectele situate acolo. După cum sa dovedit, totul este extrem de simplu. Dar îți voi spune în ordine.
Pasul 1: Descărcați scriptul API Google Map:
În documentația oficială, se recomandă să faceți acest lucru în interiorul capului, dar dacă încărcați scriptul din corp (în cazul meu era preferabil), totul funcționează. Senzorul parametru = false înseamnă că dispozitivele GPS nu sunt necesare pentru a determina locația curentă a utilizatorului.
Pasul 2. Creați o zonă pentru afișarea hărții
După cum puteți vedea, aceasta poate fi o div divină. Dacă doriți să afișați harta pe întreaga fereastră, puteți scrie în stiluri cum ar fi:
Pasul 3: Porniți harta
Pentru a face acest lucru, mai întâi creați un obiect LatLng cu coordonatele punctului, care vor fi afișate în centrul hărții:
Lungimea și latitudinea geografică sunt utilizate ca coordonate. Puteți să le găsiți utilizând o hartă Google obișnuită: găsiți locul potrivit pe hartă, faceți clic dreapta pe el și alegeți "ce este aici". Coordonatele apar în bara de căutare.
Acum, să setăm alte proprietăți ale hărții:
Există zoom - mashstab inițială (10 este doar lucru pentru a arăta partea din Moscova, pe drumul de centură) în centrul indică un obiect cu coordonatele punctului central, și mapTypeId setează vizualizarea hartă inițială (în acest caz, harta normală selectată poate fi, de asemenea opțiuni satellite - vedere din satelit, HYBRID și TERENUL).
În cele din urmă, încărcați cardul în sine:
Primul parametru aici este obiectul DOM, în care harta va fi desenată, a doua este setările specificate mai sus.
Pasul 4: Adăugați un marcator
Din nou, vom crea un obiect cu un punct, la care indicatorul va indica:
Și adăugați marcatorul pe harta încărcată în etapa anterioară:
Aici, poziția este un obiect cu coordonate, harta este harta pe care doriți să o adăugați, iar titlul este un indiciu care va apărea când treceți peste marcator.
Pasul 5. Adăugați o tranziție prin clic
Pentru clicuri, dublu clicuri, modificări în scara hărții și alte evenimente similare, se adaugă agenți de manipulare utilizând obiectul google.maps.event:
Aici, obiectul specificat prima metodă parametru addListener pentru care se adaugă un eveniment (o astfel de subiect poate fi ca un marker, iar cardul în sine), al doilea - tipul de eveniment (un singur click în acest caz), iar al treilea - funcția de tratare.
Asta e tot! Rămâne doar să închideți funcția și eticheta de script:
De asemenea, adăugați apelul la funcția de inițializare la evenimentul onLoad:
Nu pot găsi pe Internet, așa cum actualizăm temporizatorul coordonatele acestui punct cu hărțile / circulația dorisovkoy? (REFRESH întreaga pagină nu vreau să am de gând să fac o cerere de ajax la server pentru preluarea actualizărilor de coordonate api care Yandex, cel al Google. - prea extinsă, și este imposibil de a găsi metoda dreptul de a se năpusti)
și să nu te ridici de două ori: dacă folosești propria pictogramă săgeată, îmi pot schimba unghiul (am un azimut de direcție)
Pentru a muta / dorisovki probabil să se apropie sau Panto metodă, sau obiect panToBounds hărți (prima pune un nou punct în centru, al doilea - face deplasarea minimă a cardului, astfel încât punctul este vizibil).
Ie În exemplul meu ar arăta ceva de genul: mosocw.panToBounds (55,36,5);
Și pentru a schimba coordonatele punctului, teoretic este: marker.setPosition = new google.maps.LatLng (55.763525,37.560893).
În ceea ce privește unghiul săgeții, mă îndoiesc că acest lucru este posibil. Mai degrabă, trebuie să faceți un set de pictograme și să alegeți cel pe care îl doriți în funcție de locul în care săgeata ar trebui să indice.
Și dacă centrul se află pe Polul Nord, probabil că nu este suficient să stabiliți doar coordonatele centrului în acest caz, dar probabil că aveți nevoie de altceva ca tipul de schimbare a proiecției? Dar ce este necesar pentru asta?
Articole similare
Trimiteți-le prietenilor: