Introducere

Un marker identifică o locație pe o hartă. În mod implicit, un marker folosește o imagine standard. Markerele pot afișa imagini personalizate, caz în care sunt denumite de obicei „pictograme”. Markerele și pictogramele sunt obiecte de tip Marker. Puteți seta o pictogramă personalizată în constructorul marcatorului sau apelând setIcon() pe marker. Vedeți mai multe despre personalizarea imaginii de marcaj de mai jos.

În linii mari , markerii sunt un tip de suprapunere. Pentru informații despre alte tipuri de suprapunere, consultați Desenarea pe hartă.

Markerii sunt concepuți pentru a fi interactive. De exemplu, în mod implicit primesc "click" evenimente, astfel încât să puteți adăuga un ascultător de evenimente pentru a afișa o fereastră de informații care afișează informații personalizate. Puteți permite utilizatorilor să mute un marker pe hartă setând marcatorul „s draggable property to true. Pentru mai multe informații despre markere glisabile, consultați mai jos.

Adăugați un marker

Constructorul google.maps.Marker ia un singur Marker options obiect literal, specificând proprietățile inițiale ale markerului.

Următoarele câmpuri sunt deosebit de importante și sunt setate în mod obișnuit la construirea unui marker:

• position (obligatoriu) specifică un LatLng identificând locația inițială a markerului. O modalitate de recuperare a unui LatLng este folosirea serviciului de Geocodificare.
• map (opțional) specifică Map pe care să plasați marcatorul. Dacă nu specificați harta pentru construcția markerului, markerul este creat, dar nu este atașat (sau afișat pe) hartă. Puteți adăuga marcatorul ulterior apelând markerul „s setMap().

Următorul exemplu adaugă un marker simplu la o hartă de la Uluru, în centrul Australiei:

În exemplul de mai sus, markerul este plasat pe hartă la construcția markerului utilizând proprietatea map din opțiunile markerului. Alternativ, puteți adăuga markerul pe hartă direct utilizând markerul „s , așa cum se arată în exemplul de mai jos:

Markerul „s title va apărea ca o descriere.

Dacă nu doriți să treceți Marker options în constructorul marcatorului, treceți în schimb un obiect gol {} argumentul constructorului.

Vedeți exemplul

Eliminați un marker

Pentru a elimina un marker de pe hartă, apelați setMap() metodă trecând null ca argument.

marker.setMap(null);

Rețineți că cele de mai sus metoda nu șterge markerul. Elimină markerul de pe hartă. Dacă în schimb doriți să ștergeți marcatorul, ar trebui să-l eliminați de pe hartă, apoi să setați marcatorul în sine la null.

Dacă doriți să gestionați un set de markeri, ar trebui să creați o matrice pentru a ține markerii. Utilizând acest tablou, puteți apela setMap() pe fiecare marker din tablou la rândul său, atunci când trebuie să eliminați markerii. Puteți șterge marcajele eliminându-le de pe hartă și apoi setând tabloul „s length la 0, care elimină toate referințele la markeri.

Vedeți exemplul

Animați un marker

Puteți anima markeri astfel încât să prezinte mișcare dinamică într-o varietate de circumstanțe diferite. Pentru a specifica modul în care markerul este animat, utilizați proprietatea marker „s animation, de tip google.maps.Animation. Următoarele valori Animation sunt acceptate:

• DROP indică faptul că marcatorul ar trebui să cadă din partea de sus a harta până la locația sa finală atunci când este plasată prima dată pe hartă. Animația va înceta după ce markerul se va opri și animation va reveni la null. Acest tip de animație este de obicei specificat în timpul creării Marker.
• BOUNCE indică faptul că marcatorul ar trebui să sară în loc. Un marker de salt va continua să sară până când proprietatea sa animation este setată în mod explicit la null.

Tu poate iniția o animație pe un marker existent apelând setAnimation() pe obiectul Marker.

Dacă aveți mulți markeri , s-ar putea să nu doriți să le lăsați pe hartă dintr-o dată. Puteți utiliza setTimeout() pentru a spaționa animațiile marcatorilor dvs. utilizând un model ca cel prezentat mai jos:

function drop() { for (var i =0; i markerArray.length; i++) { setTimeout(function() { addMarkerMethod(); }, i * 200); }}

Afișați exemplul

Personalizați o imagine de marker

Dacă doriți să afișați o literă sau un număr pe un marker, puteți utiliza o etichetă de marker.Dacă aveți nevoie de o personalizare mai mare, puteți defini o pictogramă care să fie afișată în locul imaginii de marcaj implicite. Definirea unei pictograme implică setarea unui număr de proprietăți care determină comportamentul vizual al markerului.

Secțiunile de mai jos descriu etichete de marker, pictograme simple, pictograme complexe și simboluri (pictograme vectoriale).

Etichete marker

O etichetă marker este o literă sau un număr care apare în interiorul unui marker. Imaginea de marcaj din această secțiune afișează o etichetă de marcaj cu litera „B” pe ea. Puteți specifica o etichetă de marker ca șir sau ca obiect MarkerLabel care include un șir și alte proprietăți de etichetă.

Când creați un marker, puteți specifica un label proprietate în obiectul MarkerOptions. Alternativ, puteți apela setLabel() pe obiectul Marker pentru a seta eticheta pe un marker existent.

Următorul exemplu afișează markeri etichetați atunci când utilizatorul face clic pe hartă :

Pictograme simple

În cazul cel mai de bază, o pictogramă poate indica o imagine de utilizat în loc de pictograma implicită Google Maps. Pentru a specifica o astfel de pictogramă, setați marcatorul „s icon la adresa URL a unei imagini. API-ul JavaScript Maps va dimensiona automat pictograma.

Pictograme complexe

Poate doriți să specificați forme complexe pentru a indica regiunile care pot fi făcute clic și să specificați modul în care pictogramele ar trebui să apară în raport cu alte suprapuneri („ordinea de stivă” a acestora). id = „9ffa503dc8”> proprietățile unui obiect de tip Icon.

Icon o imagine. Acestea definesc, de asemenea, size al pictogramei, origin al pictogramei (dacă imaginea pe care o doriți face parte dintr-o imagine mai mare imagine într-un sprite, de exemplu) și anchor unde ar trebui să se afle hotspotul pictogramei (care se bazează pe origine).

folosiți o etichetă cu un marker personalizat, puteți poziționa eticheta cu proprietatea labelOrigin în obiect.

Conversia obiectelor MarkerImage pentru a tasta Icon

Până la versiunea 3.10 a API-ului JavaScript Maps, pictogramele complexe erau definite ca obiecte MarkerImage. Obiectul literal Icon a fost adăugat în versiunea 3.10 și înlocuiește MarkerImage începând cu versiunea 3.11. Icon literalele obiectelor acceptă aceiași parametri ca MarkerImage, permițându-vă să convertiți cu ușurință un MarkerImage la un Icon eliminând constructorul, împachetând parametrii anteriori în {} „s și adăugând numele fiecărui parametru. De exemplu:

devine

Simboluri

În plus față de imaginile raster, un marker acceptă afișarea căilor vectoriale numite Symbols . Pentru a afișa o cale vectorială, treceți un obiect Symbol literal cu calea dorită către marcatorul „s icon. Puteți utiliza una dintre căile predefinite în google.maps.SymbolPath sau puteți defini o cale personalizată utilizând notația cale SVG.

Pentru mai multe informații, consultați documentația pentru simboluri.

Creați un marker glisabil

Pentru a permite utilizatorilor să tragă un marker într-o altă locație de pe hartă, setați draggable la true în opțiunile de marker.

Personalizarea suplimentară a markerului

Pentru un marker complet personalizat, consultați exemplul pop-up personalizat.