Adăugați un marker pe harta Google:
Hărți Google - Suprapuneri
Suprapunerile sunt obiecte de pe hartă care sunt legate la coordonatele de latitudine / longitudine.
Google Maps are mai multe tipuri de suprapuneri:
- Marker - locații unice pe o hartă. Marcatorii poate afișa, de asemenea, pictogramă personalizată de imagini
- Polilinie - serie de linii drepte pe o hartă
- Poligon - serie de linii drepte pe o hartă, iar forma este "closed"
- Cerc și dreptunghi
- Info pentru Windows - Afișează conținut într-un balon de tip pop-up pe partea de sus a unei hărți
- suprapunerile personalizate
Hărți Google - Adăugați un marcator
Constructorul Marker creează un marcator. (Rețineți că proprietatea poziție trebuie să fie setat pentru markerul pentru a afișa).
Adăugați marcatorul hărții folosind setMap() metoda:
Exemplu
var marker=new google.maps.Marker({
position:myCenter,
});
marker.setMap(map); Încearcă - l singur » Google Maps - animați Marker
Exemplul de mai jos arată cum să anima marker cu proprietatea de animație:
Exemplu
var
marker=new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map); Încearcă - l singur » Google Maps - Icon In loc de Marker
Exemplul de mai jos specifica o imagine (icon) pentru a utiliza în locul markerului implicit:
Exemplu
var marker=new google.maps.Marker({
position:myCenter,
icon:'pinkball.png'
});
marker.setMap(map); Încearcă - l singur » Hărți Google - Polilinie
O polilinie este o linie care este trasă printr-o serie de coordonate într-o secvență ordonată.
Un polyline acceptă următoarele proprietăți:
- Cale - specifică coordonatele de mai multe latitudine / longitudine pentru linia
- strokeColor - specifică o culoare hexazecimal pentru linia (format: "#FFFFFF")
- strokeOpacity - specifică opacitatea liniei (o valoare cuprinsă între 0,0 și 1,0)
- strokeWeight - specifică greutatea cursei liniei în pixeli
- editabil - definește dacă linia este editat de utilizatori (true/false)
Exemplu
var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
}); Încearcă - l singur » Hărți Google - poligonului
Un Poligon este similar cu un Polyline prin aceea că ea constă dintr-o serie de coordonate într-o secvență ordonată. Cu toate acestea, poligoane sunt concepute pentru a defini regiuni într-o buclă închisă.
Poligoanele sunt realizate din linii drepte, iar forma este "closed" (toate liniile de a conecta în sus).
Un poligon acceptă următoarele proprietăți:
- Cale - specifică coordonatele de mai multe LatLng pentru linia (prima și ultima de coordonate sunt egale)
- strokeColor - specifică o culoare hexazecimal pentru linia (format: "#FFFFFF")
- strokeOpacity - specifică opacitatea liniei (o valoare cuprinsă între 0,0 și 1,0)
- strokeWeight - specifică greutatea cursei liniei în pixeli
- fillColor - specifică o culoare hexazecimal pentru zona în regiunea închisă (format: "#FFFFFF")
- fillOpacity - specifica opacitatea culorii de umplere (o valoare între 0,0 și 1,0)
- editabil - definește dacă linia este editat de utilizatori (true/false)
Exemplu
var myTrip = [stavanger,amsterdam,london,stavanger];
var flightPath = new google.maps.Polygon({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
}); Încearcă - l singur » Google Maps - Circle
Un cerc acceptă următoarele proprietăți:
- centru - specifică google.maps.LatLng centrului cercului
- Raza - specifică raza cercului, în metri
- strokeColor - specifică o culoare hexazecimal pentru linia în jurul cercului (format: "#FFFFFF")
- strokeOpacity - specifica opacitatea culorii accident vascular cerebral (o valoare între 0,0 și 1,0)
- strokeWeight - specifică greutatea cursei liniei în pixeli
- fillColor - specifică o culoare hexazecimal pentru zona în interiorul cercului (format: "#FFFFFF")
- fillOpacity - specifica opacitatea culorii de umplere (o valoare între 0,0 și 1,0)
- editabil - definește dacă cercul este editat de utilizatori (true/false)
Exemplu
var myCity = new google.maps.Circle({
center:amsterdam,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
}); Încearcă - l singur » Hărți Google - InfoWindow
Afișați un InfoWindow cu unele conținut text pentru un marker:
Exemplu
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker); Încearcă - l singur » Hărți Google - Suprapuneri de referință
Google Maps API - ul de referință .