Sovrapposizioni di Google Maps
Google Maps - Sovrapposizioni
Le sovrapposizioni sono oggetti sulla mappa legati alle coordinate di latitudine/longitudine.
Google Maps ha diversi tipi di overlay:
- Indicatore - Posizioni singole su una mappa. I marcatori possono anche visualizzare immagini di icone personalizzate
- Polilinea - Serie di linee rette su una mappa
- Poligono: serie di linee rette su una mappa e la forma è "chiusa"
- Cerchio e Rettangolo
- Finestre informative - Visualizza il contenuto all'interno di un fumetto popup in cima a una mappa
- Sovrapposizioni personalizzate
Google Maps - Aggiungi un indicatore
Il costruttore Marker crea un marker. Si noti che la proprietà position deve essere impostata per visualizzare l'indicatore.
Aggiungi il marker alla mappa usando il metodo setMap():
Esempio
var marker = new google.maps.Marker({position: myCenter});
marker.setMap(map);
Google Maps - Anima l'indicatore
L'esempio seguente mostra come animare l'indicatore con la proprietà di animazione:
Esempio
var
marker = new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);
Google Maps - Icona invece di indicatore
L'esempio seguente specifica un'immagine (icona) da utilizzare al posto dell'indicatore predefinito:
Esempio
var marker = new google.maps.Marker({
position:myCenter,
icon:'pinkball.png'
});
marker.setMap(map);
Google Maps - Polilinea
Una polilinea è una linea che viene tracciata attraverso una serie di coordinate in una sequenza ordinata.
Una polilinea supporta le seguenti proprietà:
- percorso - specifica diverse coordinate di latitudine/longitudine per la linea
- strokeColor - specifica un colore esadecimale per la linea (formato: "#FFFFFF")
- strokeOpacity: specifica l'opacità della linea (un valore compreso tra 0,0 e 1,0)
- strokeWeight: specifica lo spessore del tratto della linea in pixel
- modificabile - definisce se la riga è modificabile dagli utenti (vero/falso)
Esempio
var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
});
Google Maps - Poligono
Un poligono è simile a una polilinea in quanto consiste in una serie di coordinate in una sequenza ordinata. Tuttavia, i poligoni sono progettati per definire le regioni all'interno di un circuito chiuso.
I poligoni sono formati da linee rette e la forma è "chiusa" (tutte le linee si collegano).
Un poligono supporta le seguenti proprietà:
- percorso - specifica diverse coordinate LatLng per la linea (la prima e l'ultima coordinata sono uguali)
- strokeColor - specifica un colore esadecimale per la linea (formato: "#FFFFFF")
- strokeOpacity: specifica l'opacità della linea (un valore compreso tra 0,0 e 1,0)
- strokeWeight: specifica lo spessore del tratto della linea in pixel
- fillColor - specifica un colore esadecimale per l'area all'interno dell'area racchiusa (formato: "#FFFFFF")
- fillOpacity: specifica l'opacità del colore di riempimento (un valore compreso tra 0,0 e 1,0)
- modificabile - definisce se la riga è modificabile dagli utenti (vero/falso)
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
});
Google Maps - Cerchio
Un cerchio supporta le seguenti proprietà:
- center - specifica il google.maps.LatLng del centro del cerchio
- raggio: specifica il raggio del cerchio, in metri
- strokeColor - specifica un colore esadecimale per la linea attorno al cerchio (formato: "#FFFFFF")
- strokeOpacity: specifica l'opacità del colore del tratto (un valore compreso tra 0,0 e 1,0)
- strokeWeight: specifica lo spessore del tratto della linea in pixel
- fillColor - specifica un colore esadecimale per l'area all'interno del cerchio (formato: "#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 (vero/falso)
Esempio
var myCity = new google.maps.Circle({
center:amsterdam,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
Google Maps - Finestra Info
Mostra una finestra informativa con alcuni contenuti di testo per un marcatore:
Esempio
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker);