Aggiungere un marcatore per la mappa di Google:
Google Maps - Sovrapposizioni
Le sovrapposizioni sono oggetti sulla mappa della città che sono tenuti a latitudine coordinate / longitudine.
Google Maps ha diversi tipi di sovrapposizioni:
- Marker - posizioni singole su una mappa. I marcatori possono anche visualizzare le immagini delle icone personalizzate
- Polilinea - serie di linee rette su una mappa
- Poligono - serie di linee rette su una mappa, e la forma è "chiuso"
- Cerchio e rettangolo
- Info Windows - Consente di visualizzare il contenuto all'interno di un palloncino a comparsa sulla cima di una mappa
- sovrapposizioni personalizzate
Google Maps - aggiungere un marcatore
Il costruttore Marker crea un marcatore. (Si noti che la proprietà posizione deve essere impostata per il marcatore per visualizzare).
Aggiungere l'indicatore sulla mappa utilizzando il setMap() metodo:
Esempio
var marker=new google.maps.Marker({
position:myCenter,
});
marker.setMap(map); Prova tu stesso " Google Maps - animare la Marker
L'esempio seguente mostra come animare il marcatore con proprietà di animazione:
Esempio
var
marker=new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map); Prova tu stesso " Google Maps - Icona Invece di Marker
L'esempio seguente specifica un'immagine (icon) da utilizzare al posto del marcatore di default:
Esempio
var marker=new google.maps.Marker({
position:myCenter,
icon:'pinkball.png'
});
marker.setMap(map); Prova tu stesso " Google Maps - Polyline
Un Polyline è una linea che viene disegnata attraverso una serie di coordinate in una sequenza ordinata.
Una polilinea supporta le seguenti proprietà:
- percorso - specifica coordina diversi latitudine / longitudine per la linea
- strokeColor - specifica un colore esadecimale per la linea (format: "#FFFFFF")
- strokeOpacity - specifica l'opacità della linea (un valore compreso tra 0,0 e 1,0)
- strokeWeight - specifica il peso del tratto della linea in pixel
- modificabile - Definisce se la linea è modificabile dagli utenti (true/false)
Esempio
var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
}); Prova tu stesso " Google Maps - Polygon
Un poligono è simile ad una Polilinea dal fatto che consiste di una serie di coordinate in una sequenza ordinata. Tuttavia, poligoni sono progettati per definire regioni all'interno di un circuito chiuso.
I poligoni sono fatte di linee rette, e la forma è "closed" (tutte le linee collegano l'alto).
Un poligono supporta le seguenti proprietà:
- percorso - specifica coordina diversi LatLng per la linea (prima e l'ultima delle coordinate sono uguali)
- strokeColor - specifica un colore esadecimale per la linea (format: "#FFFFFF")
- strokeOpacity - specifica l'opacità della linea (un valore compreso tra 0,0 e 1,0)
- strokeWeight - specifica il peso del tratto della linea in pixel
- fillColor - specifica un colore esadecimale per l'area all'interno della regione racchiusa (format: "#FFFFFF")
- fillOpacity - specifica l'opacità del colore di riempimento (un valore compreso tra 0,0 e 1,0)
- modificabile - Definisce se la linea è modificabile dagli utenti (true/false)
Esempio
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
}); Prova tu stesso " Google Maps - Circle
Un cerchio supporta le seguenti proprietà:
- Centro - specifica la google.maps.LatLng del centro del cerchio
- Raggio - specifica il raggio del cerchio, in metri
- strokeColor - specifica un colore esadecimale per la linea intorno al cerchio (format: "#FFFFFF")
- strokeOpacity - specifica l'opacità del colore del tratto (un valore compreso tra 0,0 e 1,0)
- strokeWeight - specifica il peso del tratto della linea in pixel
- fillColor - specifica un colore esadecimale per l'area all'interno del cerchio (format: "#FFFFFF")
- fillOpacity - specifica l'opacità del colore di riempimento (un valore compreso tra 0,0 e 1,0)
- modificabile - Definisce se il cerchio è modificabile dagli utenti (true/false)
Esempio
var myCity = new google.maps.Circle({
center:amsterdam,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
}); Prova tu stesso " Google Maps - infowindow
Mostra un InfoWindow con alcuni contenuti del testo per un marcatore:
Esempio
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker); Prova tu stesso " Google Maps - sovrapposizioni di riferimento
API di Google Maps di riferimento .