de Tan Le Tian
Conţinut
Cum se schimbă culoarea markerilor Google Maps cu JavaScript
Faceți-le roz, albastru, verde, galben sau violet!
În mod implicit, marcatorul Google Maps are culoarea roșie. Acest articol va arăta cum să adăugați diferite markere de culoare la Google Maps. Asadar, haideti sa începem. ?
1. Încărcați Google Maps
Creați un fișier HTML care încarcă Google Maps urmând Documente oficiale API Google Maps: Hello World.
Codul dvs. va arăta ca fragmentul de cod de mai jos.
Notă: Nu uitați să vă schimbați YOUR_API_KEY
la cheia dvs. API Google Maps reală.
2. Adăugați diferite markere de culoare
Pentru a adăuga un marker de culoare albastră, trebuie să schimbăm pictograma markerului. Acest lucru se realizează prin adăugarea unei proprietăți pictogramă și specificarea unei adrese URL pentru aceasta, ca mai jos.
icon: { url: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png" }
Rețineți că specificăm blue-dot.png
la sfârșitul adresei URL pentru a obține un marker albastru. Pentru a adăuga un marker verde pur și simplu schimbați-l în green-dot.png
astfel încât adresa URL să fie http://maps.google.com/mapfiles/ms/icons/green-dot.png
.
Alte câteva culori disponibile:
- roz:
pink-dot.png
- galben:
yellow-dot.png
- Violet:
purple-dot.png
Pentru a obține adresa URL a mai multor pictograme de marcare, consultați acest site web.
3. Înfășurați funcția de adăugare a markerului
Pentru a face codul mai curat, putem defini un addMarker
funcție care preia latLng
și color
a markerului. Rețineți că stocăm markerii adăugați în a global markersArray
în cazul în care trebuie să efectuăm mai târziu orice operație pe markere.
Deschideți fișierul HTML în browser. Ar trebui să arate astfel:
Puteți obține versiunea finală completă a codului de la Aici. Vă rog să-mi spuneți cum merge în comentariile de mai jos.
Simțiți-vă liber să consultați un alt tutorial Google Maps pe care l-am scris:
Implementați faceți clic pe JavaScript Google Map pentru a adăuga markere glisabile cu polilinie
#Cum #schimbă #culoarea #markerilor #Google #Maps #JavaScript
Cum se schimbă culoarea markerilor Google Maps cu JavaScript