Puoi aggiungere varie forme alla mappa. Una forma è un oggetto sulla mappa, associato a una coordinata di latitudine/longitudine. Sono disponibili le seguenti forme: linee, poligoni, cerchi e rettangoli. Puoi anche configurare le forme in modo che gli utenti possano modificarle o trascinarle.
Polilinee
Per tracciare una linea sulla mappa, utilizza una polilinea. La classe Polyline definisce un overlay lineare di segmenti di linee collegate sulla mappa. Un oggetto Polyline è costituito da un array di
LatLng posizioni e crea una serie di segmenti di linee
che collegano queste località in una sequenza ordinata.
Aggiungi una polilinea
Il costruttore Polyline utilizza un insieme di
PolylineOptions che specifica le coordinate LatLng
della linea e un insieme di stili per regolare il comportamento visivo
della polilinea.
Gli oggetti Polyline vengono disegnati come una serie di segmenti dritti
sulla mappa. Puoi specificare colori, pesi e opacità personalizzati per la linea della linea all'interno di PolylineOptions durante la creazione della linea oppure puoi modificare tali proprietà dopo la creazione.
Una polilinea supporta i seguenti stili di tratto:
strokeColorspecifica un colore HTML esadecimale del formato"#FFFFFF". La classePolylinenon supporta i colori denominati.strokeOpacityspecifica un valore numerico compreso tra0.0e1.0per determinare l'opacità del colore della linea. Il valore predefinito è1.0.strokeWeightspecifica la larghezza della linea in pixel.
La proprietà editable della polilinea specifica se gli utenti possono
modificare la forma. Consulta le forme modificabili dall'utente di seguito. Analogamente, puoi impostare la proprietà draggable in modo da consentire agli utenti di trascinare la riga.
TypeScript
// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.
function initMap(): void {
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
zoom: 3,
center: { lat: 0, lng: -180 },
mapTypeId: "terrain",
}
);
const flightPlanCoordinates = [
{ lat: 37.772, lng: -122.214 },
{ lat: 21.291, lng: -157.821 },
{ lat: -18.142, lng: 178.431 },
{ lat: -27.467, lng: 153.027 },
];
const flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2,
});
flightPath.setMap(map);
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
JavaScript
// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 3,
center: { lat: 0, lng: -180 },
mapTypeId: "terrain",
});
const flightPlanCoordinates = [
{ lat: 37.772, lng: -122.214 },
{ lat: 21.291, lng: -157.821 },
{ lat: -18.142, lng: 178.431 },
{ lat: -27.467, lng: 153.027 },
];
const flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2,
});
flightPath.setMap(map);
}
window.initMap = initMap;
Prova anteprima
Rimuovere una polilinea
Per rimuovere una polilinea dalla mappa, chiama il metodo setMap() che trasmette null come argomento. Nell'esempio seguente,
flightPath è un oggetto polilinea:
flightPath.setMap(null);
Tieni presente che il metodo riportato sopra non elimina la polilinea. Rimuove la polilinea dalla mappa. Se invece vuoi eliminare la polilinea, devi rimuoverla dalla mappa e poi impostare la polilinea stessa su null.
Ispeziona una polilinea
Una polilinea specifica una serie di coordinate come un array di oggetti LatLng. Queste coordinate determinano il percorso della linea.
Per recuperare le coordinate, chiama getPath(), che restituirà un array di tipo MVCArray. Puoi
manipolare e ispezionare l'array utilizzando le seguenti operazioni:
getAt()restituisceLatLnga un determinato valore di indice basato su zero.insertAt()inserisce un valoreLatLngsuperato in un determinato valore di indice basato su zero. Tieni presente che le coordinate esistenti a quel valore di indice vengono spostate in avanti.removeAt()rimuove unLatLnga un determinato valore di indice in base zero.
TypeScript
// This example creates an interactive map which constructs a polyline based on
// user clicks. Note that the polyline only appears once its path property
// contains two LatLng coordinates.
let poly: google.maps.Polyline;
let map: google.maps.Map;
function initMap(): void {
map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
zoom: 7,
center: { lat: 41.879, lng: -87.624 }, // Center the map on Chicago, USA.
});
poly = new google.maps.Polyline({
strokeColor: "#000000",
strokeOpacity: 1.0,
strokeWeight: 3,
});
poly.setMap(map);
// Add a listener for the click event
map.addListener("click", addLatLng);
}
// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event: google.maps.MapMouseEvent) {
const path = poly.getPath();
// Because path is an MVCArray, we can simply append a new coordinate
// and it will automatically appear.
path.push(event.latLng as google.maps.LatLng);
// Add a new marker at the new plotted point on the polyline.
new google.maps.Marker({
position: event.latLng,
title: "#" + path.getLength(),
map: map,
});
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
JavaScript
// This example creates an interactive map which constructs a polyline based on
// user clicks. Note that the polyline only appears once its path property
// contains two LatLng coordinates.
let poly;
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
zoom: 7,
center: { lat: 41.879, lng: -87.624 }, // Center the map on Chicago, USA.
});
poly = new google.maps.Polyline({
strokeColor: "#000000",
strokeOpacity: 1.0,
strokeWeight: 3,
});
poly.setMap(map);
// Add a listener for the click event
map.addListener("click", addLatLng);
}
// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event) {
const path = poly.getPath();
// Because path is an MVCArray, we can simply append a new coordinate
// and it will automatically appear.
path.push(event.latLng);
// Add a new marker at the new plotted point on the polyline.
new google.maps.Marker({
position: event.latLng,
title: "#" + path.getLength(),
map: map,
});
}
window.initMap = initMap;
Prova anteprima
Personalizzare una polilinea
Puoi aggiungere immagini basate su vettori a una polilinea sotto forma di simboli. Grazie alla combinazione di simboli e classe PolylineOptions, hai un controllo elevato sull'aspetto delle polilinee sulla mappa.
Consulta la sezione Simboli per informazioni su frecce, linee tratteggiate, simboli personalizzati e simboli animati.
Poligoni
Un poligono rappresenta un'area racchiusa da un percorso (o loop) chiuso,
definita da una serie di coordinate.
Gli oggetti Polygon sono simili agli oggetti Polyline in quanto sono costituiti da una serie di coordinate in sequenza ordinata.
I poligoni vengono disegnati con un tratto e un riempimento. Puoi definire colori, pesi e opacità personalizzati per il bordo del poligono (tratto) e colori e opacità personalizzati per l'area delimitata (il riempimento). I colori devono essere
indicati in formato HTML esadecimale. I nomi dei colori non sono supportati.
Gli oggetti Polygon possono descrivere forme complesse, tra cui:
- Più aree non contigue definite da un singolo poligono.
- Aree con fori.
- Incroci di una o più aree.
Per definire una forma complessa, utilizza un poligono con più percorsi.
Nota: il livello dati offre un modo semplice per disegnare poligoni. Gestisce gli avvolgimenti di poligoni per tuo conto, semplificando il disegno di poligoni con i fori. Consulta la documentazione per il livello dati.
Aggiungere un poligono
Poiché un'area poligonale può includere diversi percorsi separati, la proprietà paths dell'oggetto Polygon specifica un array di array, ciascuno del tipo MVCArray. Ogni array definisce una sequenza separata di coordinate LatLng ordinate.
Per i poligoni semplici composti da un solo percorso, puoi
creare un Polygon utilizzando un singolo array di
coordinate LatLng. L'API Maps JavaScript convertirà
l'array semplice in un array di array al momento della sua creazione
quando viene archiviato all'interno della proprietà paths. L'API fornisce un semplice metodo getPath() per i poligoni composti da un percorso.
La proprietà editable del poligono specifica se gli utenti possono modificare la forma. Consulta la sezione Forme modificabili dagli utenti di seguito.
Analogamente, puoi impostare la proprietà draggable in modo da consentire agli utenti di
trascinare la forma.
TypeScript
// This example creates a simple polygon representing the Bermuda Triangle.
function initMap(): void {
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
zoom: 5,
center: { lat: 24.886, lng: -70.268 },
mapTypeId: "terrain",
}
);
// Define the LatLng coordinates for the polygon's path.
const triangleCoords = [
{ lat: 25.774, lng: -80.19 },
{ lat: 18.466, lng: -66.118 },
{ lat: 32.321, lng: -64.757 },
{ lat: 25.774, lng: -80.19 },
];
// Construct the polygon.
const bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
});
bermudaTriangle.setMap(map);
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
JavaScript
// This example creates a simple polygon representing the Bermuda Triangle.
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 5,
center: { lat: 24.886, lng: -70.268 },
mapTypeId: "terrain",
});
// Define the LatLng coordinates for the polygon's path.
const triangleCoords = [
{ lat: 25.774, lng: -80.19 },
{ lat: 18.466, lng: -66.118 },
{ lat: 32.321, lng: -64.757 },
{ lat: 25.774, lng: -80.19 },
];
// Construct the polygon.
const bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
});
bermudaTriangle.setMap(map);
}
window.initMap = initMap;
Prova anteprima
Completamento automatico per poligono
Polygon nell'esempio precedente è costituito da quattro insiemi di
coordinate LatLng, ma nota che il primo e l'ultimo set
definiscono la stessa posizione, che completa il ciclo. In pratica, però, dato che i poligoni definiscono le aree chiuse, non è necessario specificare l'ultimo insieme di coordinate. L'API Maps JavaScript completerà automaticamente
il poligono tracciando un tratto che collega l'ultima posizione alla prima
località di un determinato percorso.
Il seguente esempio è identico a quello precedente, tranne per il fatto che l'ultimo LatLng è omesso: visualizza esempio.
Rimuovere un poligono
Per rimuovere un poligono dalla mappa, chiama il metodo setMap() che trasmette null come argomento. Nell'esempio seguente, bermudaTriangle è un oggetto poligonale:
bermudaTriangle.setMap(null);
Tieni presente che il metodo riportato sopra non elimina il poligono. Rimuove il poligono dalla mappa. Per farlo, devi rimuovere il poligono dalla mappa e poi impostarlo su null.
Ispezionare un poligono
Un poligono specifica la serie di coordinate come una matrice, in cui ogni matrice è di tipo MVCArray. Ogni
array "leaf" è un array di coordinate LatLng
che specificano un singolo percorso. Per recuperare queste coordinate, chiama il metodo getPaths() dell'oggetto Polygon. Poiché l'array è un MVCArray, dovrai manipolarlo e ispezionarlo utilizzando le seguenti operazioni:
getAt()restituisceLatLnga un determinato valore di indice basato su zero.insertAt()inserisce un valoreLatLngsuperato in un determinato valore di indice basato su zero. Tieni presente che le coordinate esistenti a quel valore di indice vengono spostate in avanti.removeAt()rimuove unLatLnga un determinato valore di indice in base zero.
TypeScript
// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.
let map: google.maps.Map;
let infoWindow: google.maps.InfoWindow;
function initMap(): void {
map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
zoom: 5,
center: { lat: 24.886, lng: -70.268 },
mapTypeId: "terrain",
});
// Define the LatLng coordinates for the polygon.
const triangleCoords: google.maps.LatLngLiteral[] = [
{ lat: 25.774, lng: -80.19 },
{ lat: 18.466, lng: -66.118 },
{ lat: 32.321, lng: -64.757 },
];
// Construct the polygon.
const bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: "#FF0000",
fillOpacity: 0.35,
});
bermudaTriangle.setMap(map);
// Add a listener for the click event.
bermudaTriangle.addListener("click", showArrays);
infoWindow = new google.maps.InfoWindow();
}
function showArrays(event: any) {
// Since this polygon has only one path, we can call getPath() to return the
// MVCArray of LatLngs.
// @ts-ignore
const polygon = this as google.maps.Polygon;
const vertices = polygon.getPath();
let contentString =
"<b>Bermuda Triangle polygon</b><br>" +
"Clicked location: <br>" +
event.latLng.lat() +
"," +
event.latLng.lng() +
"<br>";
// Iterate over the vertices.
for (let i = 0; i < vertices.getLength(); i++) {
const xy = vertices.getAt(i);
contentString +=
"<br>" + "Coordinate " + i + ":<br>" + xy.lat() + "," + xy.lng();
}
// Replace the info window's content and position.
infoWindow.setContent(contentString);
infoWindow.setPosition(event.latLng);
infoWindow.open(map);
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
JavaScript
// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.
let map;
let infoWindow;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
zoom: 5,
center: { lat: 24.886, lng: -70.268 },
mapTypeId: "terrain",
});
// Define the LatLng coordinates for the polygon.
const triangleCoords = [
{ lat: 25.774, lng: -80.19 },
{ lat: 18.466, lng: -66.118 },
{ lat: 32.321, lng: -64.757 },
];
// Construct the polygon.
const bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: "#FF0000",
fillOpacity: 0.35,
});
bermudaTriangle.setMap(map);
// Add a listener for the click event.
bermudaTriangle.addListener("click", showArrays);
infoWindow = new google.maps.InfoWindow();
}
function showArrays(event) {
// Since this polygon has only one path, we can call getPath() to return the
// MVCArray of LatLngs.
// @ts-ignore
const polygon = this;
const vertices = polygon.getPath();
let contentString =
"<b>Bermuda Triangle polygon</b><br>" +
"Clicked location: <br>" +
event.latLng.lat() +
"," +
event.latLng.lng() +
"<br>";
// Iterate over the vertices.
for (let i = 0; i < vertices.getLength(); i++) {
const xy = vertices.getAt(i);
contentString +=
"<br>" + "Coordinate " + i + ":<br>" + xy.lat() + "," + xy.lng();
}
// Replace the info window's content and position.
infoWindow.setContent(contentString);
infoWindow.setPosition(event.latLng);
infoWindow.open(map);
}
window.initMap = initMap;
Prova anteprima
Inserire un foro in un poligono
Per creare un'area vuota all'interno di un poligono, devi creare due percorsi, uno all'interno dell'altro. Per creare il buco, le coordinate che definiscono il percorso interno devono essere nell'ordine opposto a quelle che definiscono il percorso esterno. Ad esempio, se le coordinate del percorso esterno sono in senso orario, il percorso interno deve essere in senso antiorario.
Nota: il livello dati gestisce l'ordine dei percorsi interni ed esterni per te, semplificando il disegno dei poligoni con i fori. Consulta la documentazione per il livello dati.
L'esempio che segue traccia un poligono con due percorsi, con il percorso interno avvolto nella direzione opposta del percorso esterno.
TypeScript
// This example creates a triangular polygon with a hole in it.
function initMap(): void {
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
zoom: 5,
center: { lat: 24.886, lng: -70.268 },
}
);
// Define the LatLng coordinates for the polygon's outer path.
const outerCoords = [
{ lat: 25.774, lng: -80.19 },
{ lat: 18.466, lng: -66.118 },
{ lat: 32.321, lng: -64.757 },
];
// Define the LatLng coordinates for the polygon's inner path.
// Note that the points forming the inner path are wound in the
// opposite direction to those in the outer path, to form the hole.
const innerCoords = [
{ lat: 28.745, lng: -70.579 },
{ lat: 29.57, lng: -67.514 },
{ lat: 27.339, lng: -66.668 },
];
// Construct the polygon, including both paths.
const bermudaTriangle = new google.maps.Polygon({
paths: [outerCoords, innerCoords],
strokeColor: "#FFC107",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FFC107",
fillOpacity: 0.35,
});
bermudaTriangle.setMap(map);
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
JavaScript
// This example creates a triangular polygon with a hole in it.
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 5,
center: { lat: 24.886, lng: -70.268 },
});
// Define the LatLng coordinates for the polygon's outer path.
const outerCoords = [
{ lat: 25.774, lng: -80.19 },
{ lat: 18.466, lng: -66.118 },
{ lat: 32.321, lng: -64.757 },
];
// Define the LatLng coordinates for the polygon's inner path.
// Note that the points forming the inner path are wound in the
// opposite direction to those in the outer path, to form the hole.
const innerCoords = [
{ lat: 28.745, lng: -70.579 },
{ lat: 29.57, lng: -67.514 },
{ lat: 27.339, lng: -66.668 },
];
// Construct the polygon, including both paths.
const bermudaTriangle = new google.maps.Polygon({
paths: [outerCoords, innerCoords],
strokeColor: "#FFC107",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FFC107",
fillOpacity: 0.35,
});
bermudaTriangle.setMap(map);
}
window.initMap = initMap;
Prova anteprima
Rettangoli
Oltre a una classe Polygon generica, l'API JavaScript di Google Maps include una classe specifica per gli oggetti Rectangle, per semplificarne la creazione.
Aggiungi un rettangolo
Un Rectangle è simile a un Polygon in cui puoi definire colori, pesi e opacità personalizzati per il bordo del rettangolo (il tratto) e colori e opacità personalizzati per l'area all'interno del rettangolo (il riempimento). I colori devono essere indicati in stile HTML numerico esadecimale.
A differenza di Polygon, non definisci paths
per Rectangle. Invece, un rettangolo ha una proprietà bounds
che ne definisce la forma specificando un
google.maps.LatLngBounds per il rettangolo.
La proprietà editable del rettangolo specifica se gli utenti possono modificare la forma. Consulta le forme modificabili dall'utente di seguito. Analogamente, puoi impostare la proprietà draggable
per consentire agli utenti di trascinare il rettangolo.
TypeScript
// This example adds a red rectangle to a map.
function initMap(): void {
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
zoom: 11,
center: { lat: 33.678, lng: -116.243 },
mapTypeId: "terrain",
}
);
const rectangle = new google.maps.Rectangle({
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map,
bounds: {
north: 33.685,
south: 33.671,
east: -116.234,
west: -116.251,
},
});
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
JavaScript
// This example adds a red rectangle to a map.
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 11,
center: { lat: 33.678, lng: -116.243 },
mapTypeId: "terrain",
});
const rectangle = new google.maps.Rectangle({
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map,
bounds: {
north: 33.685,
south: 33.671,
east: -116.234,
west: -116.251,
},
});
}
window.initMap = initMap;
Prova anteprima
Il seguente codice crea un rettangolo ogni volta che l'utente cambia lo zoom sulla mappa. Le dimensioni del rettangolo dipendono dall'area visibile.
TypeScript
// This example creates a rectangle based on the viewport
// on any 'zoom-changed' event.
function initMap(): void {
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
zoom: 11,
center: { lat: 40.74852, lng: -73.981687 },
mapTypeId: "terrain",
}
);
const rectangle = new google.maps.Rectangle();
map.addListener("zoom_changed", () => {
// Get the current bounds, which reflect the bounds before the zoom.
rectangle.setOptions({
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map,
bounds: map.getBounds() as google.maps.LatLngBounds,
});
});
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
JavaScript
// This example creates a rectangle based on the viewport
// on any 'zoom-changed' event.
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 11,
center: { lat: 40.74852, lng: -73.981687 },
mapTypeId: "terrain",
});
const rectangle = new google.maps.Rectangle();
map.addListener("zoom_changed", () => {
// Get the current bounds, which reflect the bounds before the zoom.
rectangle.setOptions({
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map,
bounds: map.getBounds(),
});
});
}
window.initMap = initMap;
Prova anteprima
Rimuovere un rettangolo
Per rimuovere un rettangolo dalla mappa, chiama il metodo setMap() passando
null come argomento.
rectangle.setMap(null);
Tieni presente che il metodo sopra indicato non elimina il rettangolo. Rimuove il rettangolo dalla mappa. Se invece vuoi eliminare il rettangolo, rimuovilo dalla mappa e poi imposta il rettangolo su null.
Cerchi
Oltre alla classe Polygon generica, l'API JavaScript di Google Maps include una classe specifica per gli oggetti Circle, per semplificarne la creazione.
Aggiungi una cerchia
Un Circle è simile a un Polygon in quanto puoi definire colori, pesi e opacità personalizzati per il bordo del cerchio (il tratto) e colori e opacità personalizzati per l'area all'interno del cerchio (il riempimento). I colori devono essere indicati in stile HTML numerico esadecimale.
A differenza di Polygon, non definisci paths
per Circle. Invece, un cerchio ha due proprietà aggiuntive che ne definiscono la forma:
centerspecifica ilgoogle.maps.LatLngdel centro del cerchio.radiusspecifica il raggio del cerchio, in metri.
La proprietà editable del cerchio specifica se gli utenti possono modificare la forma. Consulta la sezione Forme modificabili dagli utenti di seguito.
Analogamente, puoi impostare la proprietà draggable in modo da consentire agli utenti di trascinare il cerchio.
TypeScript
// This example creates circles on the map, representing populations in North
// America.
// First, create an object containing LatLng and population for each city.
interface City {
center: google.maps.LatLngLiteral;
population: number;
}
const citymap: Record<string, City> = {
chicago: {
center: { lat: 41.878, lng: -87.629 },
population: 2714856,
},
newyork: {
center: { lat: 40.714, lng: -74.005 },
population: 8405837,
},
losangeles: {
center: { lat: 34.052, lng: -118.243 },
population: 3857799,
},
vancouver: {
center: { lat: 49.25, lng: -123.1 },
population: 603502,
},
};
function initMap(): void {
// Create the map.
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
zoom: 4,
center: { lat: 37.09, lng: -95.712 },
mapTypeId: "terrain",
}
);
// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
for (const city in citymap) {
// Add the circle for this city to the map.
const cityCircle = new google.maps.Circle({
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map,
center: citymap[city].center,
radius: Math.sqrt(citymap[city].population) * 100,
});
}
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
JavaScript
const citymap = {
chicago: {
center: { lat: 41.878, lng: -87.629 },
population: 2714856,
},
newyork: {
center: { lat: 40.714, lng: -74.005 },
population: 8405837,
},
losangeles: {
center: { lat: 34.052, lng: -118.243 },
population: 3857799,
},
vancouver: {
center: { lat: 49.25, lng: -123.1 },
population: 603502,
},
};
function initMap() {
// Create the map.
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: { lat: 37.09, lng: -95.712 },
mapTypeId: "terrain",
});
// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
for (const city in citymap) {
// Add the circle for this city to the map.
const cityCircle = new google.maps.Circle({
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map,
center: citymap[city].center,
radius: Math.sqrt(citymap[city].population) * 100,
});
}
}
window.initMap = initMap;
Prova anteprima
Rimuovere una cerchia
Per rimuovere un cerchio dalla mappa, chiama il metodo setMap(),
inserendo null come argomento.
circle.setMap(null);
Tieni presente che il metodo sopra indicato non elimina il cerchio. Rimuove il cerchio dalla mappa. Se invece vuoi eliminare la cerchia, devi rimuoverla dalla mappa e poi impostare la cerchia stessa su null.
Forme modificabili dall'utente e trascinabili
Se rendi modificabile una forma, vengono aggiunti punti di manipolazione, che possono essere utilizzati per riposizionare, rimodellare e ridimensionare la forma direttamente sulla mappa. Inoltre, puoi creare una forma trascinabile, in modo che gli utenti possano spostarla in un punto diverso sulla mappa.
Le modifiche apportate dall'utente all'oggetto non vengono mantenute tra una sessione e l'altra. Se vuoi salvare le modifiche dell'utente, devi acquisire e archiviare le informazioni in autonomia.
Rendere una forma modificabile
Puoi impostare qualsiasi forma (polilinee, poligoni, cerchi e rettangoli) come modificabile dall'utente, impostando editable su true nelle opzioni della forma.
var bounds = {
north: 44.599,
south: 44.490,
east: -78.443,
west: -78.649
};
// Define a rectangle and set its editable property to true.
var rectangle = new google.maps.Rectangle({
bounds: bounds,
editable: true
});
Crea una forma trascinabile
Per impostazione predefinita, una forma disegnata sulla mappa sarà fissa in posizione. Per consentire agli utenti di trascinare una forma in una posizione diversa sulla mappa, imposta draggable su true nelle opzioni della forma.
var redCoords = [
{lat: 25.774, lng: -80.190},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757}
];
// Construct a draggable red triangle with geodesic set to true.
new google.maps.Polygon({
map: map,
paths: redCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
draggable: true,
geodesic: true
});
Quando attivi il trascinamento su un poligono o su una polilinea, ti consigliamo di impostare la proprietà per poligoni o polilinea anche impostando la relativa proprietà geodesic su true.
Il poligono geodetico manterrà la sua vera forma geografica quando viene spostato, rendendolo distorto quando viene spostato a nord o a sud nella proiezione di Mercatore. I poligoni non geodetici manterranno sempre il loro aspetto iniziale sullo schermo.
In una polilinea geodetica, i segmenti della polilinea vengono tracciati come il percorso più breve tra due punti sulla superficie terrestre, supponendo che la Terra sia una sfera, anziché le linee rette sulla proiezione di Mercatore.
Per maggiori informazioni sui sistemi di coordinate, consulta la guida alle coordinate di mappe e riquadri.
La seguente mappa mostra due triangoli di circa le stesse dimensioni. La proprietà geodesic del triangolo rosso è impostata su
true. Osserva come cambia la forma quando si sposta verso nord.
Ascolta gli eventi di modifica
Quando una forma viene modificata, viene attivato un evento al termine della modifica. Questi eventi sono elencati di seguito.
| Shape | Eventi |
|---|---|
| Cerchio |
radius_changedcenter_changed
|
| Poligono |
insert_atremove_atset_at
Il listener deve essere impostato sul percorso del poligono. Se il poligono ha più percorsi, è necessario impostare un listener per ciascun percorso. |
| Polilinea |
insert_atremove_atset_at
Il listener deve essere impostato sul percorso della polilinea. |
| Rettangolo | bounds_changed |
Alcuni snippet di codice utili:
google.maps.event.addListener(circle, 'radius_changed', function() {
console.log(circle.getRadius());
});
google.maps.event.addListener(outerPath, 'set_at', function() {
console.log('Vertex moved on outer path.');
});
google.maps.event.addListener(innerPath, 'insert_at', function() {
console.log('Vertex removed from inner path.');
});
google.maps.event.addListener(rectangle, 'bounds_changed', function() {
console.log('Bounds changed.');
});
Esempio di gestione di un evento di modifica su un rettangolo: visualizza esempio.
Ascolta gli eventi di trascinamento
Quando una forma viene trascinata, gli eventi vengono attivati all'inizio e alla fine dell'azione di trascinamento, nonché durante il trascinamento. I seguenti eventi vengono attivati per polilinee, poligoni, cerchi e rettangoli.
| Evento | Descrizione |
|---|---|
dragstart |
Attivato quando l'utente inizia a trascinare la forma. |
drag |
Viene attivato ripetutamente mentre l'utente trascina la forma. |
dragend |
Attivato quando l'utente smette di trascinare la forma. |
Per scoprire di più sulla gestione degli eventi, consulta la documentazione sugli eventi.