Forme e linee

Seleziona la piattaforma: Android iOS JavaScript

Puoi aggiungere varie forme alla mappa. Una forma è un oggetto sulla mappa, collegato 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 oppure combinarle con la libreria Geometry (google.maps.GeometryLibrary) per controllare i confini dei geofence e delle zone sicure.

Polilinee

Per tracciare una linea sulla mappa, utilizza una polilinea. La classe Polyline definisce una sovrapposizione lineare di segmenti di linea collegati sulla mappa. Un oggetto Polyline è costituito da un array di località LatLng e crea una serie di segmenti di linea che collegano queste località in una sequenza ordinata.

Aggiungi una polilinea

Il costruttore Polyline accetta un insieme di PolylineOptions che specificano 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 retti sulla mappa. Puoi specificare colori, spessori e opacità personalizzati per il tratto della linea all'interno di PolylineOptions durante la creazione della linea oppure puoi modificare queste proprietà in un secondo momento. Una polilinea supporta i seguenti stili di tratto:

  • strokeColor specifica un colore HTML esadecimale nel formato "#FFFFFF". La classe Polyline non supporta i colori con nome.
  • strokeOpacity specifica un valore numerico compreso tra 0.0 e 1.0 per determinare l'opacità del colore della linea. Il valore predefinito è 1.0.
  • strokeWeight specifica la larghezza della linea in pixel.

La proprietà editable della polilinea specifica se gli utenti possono modificare la forma. Consulta la sezione Forme modificabili dall'utente di seguito. Analogamente, puoi impostare la proprietà draggable per consentire agli utenti di trascinare la linea.

Questo esempio crea una polilinea rossa larga due pixel che mostra il percorso del primo volo transpacifico tra Oakland, in California, e Brisbane, in Australia.

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.
const mapElement = document.querySelector('gmp-map')!;
let innerMap: google.maps.Map;

async function init() {
    const { Polyline } = await google.maps.importLibrary('maps');
    innerMap = mapElement.innerMap;

    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 Polyline({
        path: flightPlanCoordinates,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2,
    });

    flightPath.setMap(innerMap);
}

void init();

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.
const mapElement = document.querySelector('gmp-map');
let innerMap;

async function init() {
    const { Polyline } = await google.maps.importLibrary('maps');
    innerMap = mapElement.innerMap;

    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 Polyline({
        path: flightPlanCoordinates,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2,
    });

    flightPath.setMap(innerMap);
}

void init();
Visualizza esempio

Rimuovi una polilinea

Per rimuovere una polilinea dalla mappa, chiama il metodo setMap() passando null come argomento. Nell'esempio seguente, flightPath è un oggetto polilinea:

flightPath.setMap(null);

Tieni presente che il metodo precedente non elimina la polilinea. Rimuove la polilinea dalla mappa. Se invece vuoi eliminare la polilinea, devi rimuoverla dalla mappa e poi impostarla 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 ed esaminare l'array utilizzando le seguenti operazioni:

  • getAt() restituisce LatLng in corrispondenza di un determinato valore di indice basato su zero.
  • insertAt() inserisce un LatLng passato in un determinato valore di indice basato su zero. Tieni presente che le coordinate esistenti in corrispondenza di quel valore di indice vengono spostate in avanti.
  • removeAt() rimuove un LatLng in corrispondenza di un determinato valore di indice basato su zero.

L'esempio seguente mostra la creazione di una polilinea in base ai clic (fai clic sulla mappa per aggiungere un vertice).

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;
const mapElement = document.querySelector('gmp-map')!;
let innerMap: google.maps.Map;

async function init() {
    // Import the needed libraries.
    const [{ Polyline }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('marker'),
    ]);

    innerMap = mapElement.innerMap;

    poly = new Polyline({
        strokeColor: '#000000',
        strokeOpacity: 1.0,
        strokeWeight: 3,
    });
    poly.setMap(innerMap);

    // Handles click events on a map, and adds a new point to the Polyline.
    innerMap.addListener('click', (event: google.maps.MapMouseEvent) => {
        const latLng = event.latLng;
        if (!latLng) return;

        const path = poly.getPath();

        // Because path is an MVCArray, we can simply append a new coordinate
        // and it will automatically appear.
        path.push(latLng);

        // Add a new marker at the new plotted point on the polyline.
        new AdvancedMarkerElement({
            position: latLng,
            title: '#' + path.getLength(),
            map: innerMap,
        });
    });
}

void init();

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;
const mapElement = document.querySelector('gmp-map');
let innerMap;

async function init() {
    // Import the needed libraries.
    const [{ Polyline }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('marker'),
    ]);

    innerMap = mapElement.innerMap;

    poly = new Polyline({
        strokeColor: '#000000',
        strokeOpacity: 1.0,
        strokeWeight: 3,
    });
    poly.setMap(innerMap);

    // Handles click events on a map, and adds a new point to the Polyline.
    innerMap.addListener('click', (event) => {
        const latLng = event.latLng;
        if (!latLng) return;

        const path = poly.getPath();

        // Because path is an MVCArray, we can simply append a new coordinate
        // and it will automatically appear.
        path.push(latLng);

        // Add a new marker at the new plotted point on the polyline.
        new AdvancedMarkerElement({
            position: latLng,
            title: '#' + path.getLength(),
            map: innerMap,
        });
    });
}

void init();
Visualizza esempio

Personalizza una polilinea

Puoi aggiungere immagini vettoriali a una polilinea sotto forma di simboli. Con una combinazione di simboli e della classe PolylineOptions, hai un controllo elevato sull'aspetto delle polilinee sulla mappa. Per informazioni su frecce, linee tratteggiate, simboli personalizzati e simboli animati, consulta la sezione Simboli.

Poligoni

Un poligono rappresenta un'area racchiusa da un percorso chiuso (o loop), definito da una serie di coordinate. Gli oggetti Polygon sono simili agli oggetti Polyline in quanto sono costituiti da una serie di coordinate in una sequenza ordinata. I poligoni vengono disegnati con un tratto e un riempimento. Puoi definire colori, spessori e opacità personalizzati per il bordo del poligono (il tratto) e colori e opacità personalizzati per l'area racchiusa (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 unico poligono.
  • Aree con buchi.
  • Intersezioni di una o più aree.

Per definire una forma complessa, utilizza un poligono con più percorsi.

Nota: il livello dati fornisce un modo semplice per disegnare poligoni. Gestisce l'avvolgimento dei poligoni, semplificando il disegno di poligoni con fori. Consulta la documentazione relativa al 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 di tipo MVCArray. Ogni array definisce una sequenza separata di coordinate LatLng ordinate.

Per i poligoni semplici costituiti da un solo percorso, puoi creare un Polygon utilizzando un singolo array di coordinate LatLng. L'API Maps JavaScript converte l'array semplice in un array di array al momento della creazione quando lo archivia nella proprietà paths. L'API fornisce un metodo getPath() semplice per i poligoni costituiti da un percorso.

La proprietà editable del poligono specifica se gli utenti possono modificare la forma. Consulta la sezione Forme modificabili dall'utente di seguito. Analogamente, puoi impostare la proprietà draggable per 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;
Visualizza esempio

Completamento automatico dei poligoni

Il Polygon nell'esempio precedente è costituito da quattro insiemi di coordinate LatLng, ma tieni presente che il primo e l'ultimo insieme definiscono la stessa posizione, che completa il loop. In pratica, tuttavia, poiché i poligoni definiscono aree chiuse, non è necessario specificare l'ultimo insieme di coordinate. L'API Maps JavaScript completa automaticamente il poligono disegnando un tratto che collega l'ultima posizione alla prima per un determinato percorso.

L'esempio seguente è identico al precedente, ad eccezione dell'omissione dell'ultimo LatLng: visualizza l'esempio.

Rimuovi un poligono

Per rimuovere un poligono dalla mappa, chiama il metodo setMap() passando null come argomento. Nell'esempio seguente, bermudaTriangle è un oggetto poligono:

bermudaTriangle.setMap(null);

Tieni presente che il metodo precedente non elimina il poligono. Il poligono viene rimosso dalla mappa. Se invece vuoi eliminare il poligono, devi rimuoverlo dalla mappa e poi impostarlo su null.

Ispeziona un poligono

Un poligono specifica la sua serie di coordinate come un array di array, in cui ogni array è di tipo MVCArray. Ogni array "foglia" è un array di coordinate LatLng che specifica 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() restituisce LatLng in corrispondenza di un determinato valore di indice basato su zero.
  • insertAt() inserisce un LatLng passato in un determinato valore di indice basato su zero. Tieni presente che le coordinate esistenti in corrispondenza di quel valore di indice vengono spostate in avanti.
  • removeAt() rimuove un LatLng in corrispondenza di un determinato valore di indice basato su 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;
Visualizza esempio

Crea 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 foro, 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 per te l'ordine dei percorsi interni ed esterni, semplificando il disegno di poligoni con fori. Consulta la documentazione relativa al livello dati.

L'esempio seguente disegna un poligono con due percorsi, con il percorso interno avvolto nella direzione opposta rispetto al 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;
Visualizza esempio

Rettangoli

Oltre a una classe Polygon generica, l'API Maps JavaScript di Google include una classe specifica per gli oggetti Rectangle, per semplificarne la creazione.

Aggiungi un rettangolo

Un Rectangle è simile a un Polygon in quanto puoi definire colori, spessori 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 un Polygon, non definisci paths per un Rectangle. Un rettangolo ha invece 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 la sezione 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;
Visualizza esempio

Il seguente codice crea un rettangolo ogni volta che l'utente modifica lo zoom sulla mappa. La dimensione del rettangolo è determinata 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;
Visualizza esempio

Rimuovi 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 riportato non elimina il rettangolo. Rimuove il rettangolo dalla mappa. Se invece vuoi eliminare il rettangolo, devi rimuoverlo dalla mappa e poi impostare il rettangolo stesso su null.

Cerchi

Oltre alla classe generica Polygon, l'API Maps JavaScript di Google 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, spessori 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 un Polygon, non definisci paths per un Circle. Un cerchio ha invece due proprietà aggiuntive che ne definiscono la forma:

  • center specifica la google.maps.LatLng del centro del cerchio.
  • radius specifica il raggio del cerchio in metri.

La proprietà editable del cerchio specifica se gli utenti possono modificare la forma. Consulta la sezione Forme modificabili dall'utente di seguito. Analogamente, puoi impostare la proprietà draggable per consentire agli utenti di trascinare il cerchio.

L'esempio seguente utilizza i cerchi per mostrare i tempi di percorrenza a piedi approssimativi tra le località di Kyoto, in Giappone. Seleziona la distanza necessaria dal menu, fai clic sulla mappa per ricentrare il cerchio e trascinalo per riposizionarlo.

TypeScript

const mapElement = document.querySelector('gmp-map')!;
let innerMap: google.maps.Map;

async function init() {
    // Request needed libraries.
    const [{ Circle }, { AdvancedMarkerElement }, { event }] =
        await Promise.all([
            google.maps.importLibrary('maps'),
            google.maps.importLibrary('marker'),
            google.maps.importLibrary('core'),
        ]);

    // Set the initial map center point.
    const initialCenter = { lat: 34.98956821576194, lng: 135.74239981260283 }; // Hotel Emion, Kyoto, Japan

    // Get the inner map.
    innerMap = mapElement.innerMap;

    // Get the buttons.
    const buttons = document.querySelectorAll('input[name="radius"]');

    // Create the circle.
    const walkingCircle = new Circle({
        strokeColor: '#ffdd00ff',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#ffdd00ff',
        fillOpacity: 0.35,
        map: innerMap,
        center: initialCenter,
        radius: 400,
        draggable: true,
        editable: false,
    });

    // Define a "Crosshair" vector icon
    const parser = new DOMParser();
    const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-6 -6 12 12"><path d="M -6,0 L 6,0 M 0,-6 L 0,6" stroke="black" stroke-width="1"/></svg>`;

    const pinSvg = parser.parseFromString(
        svgString,
        'image/svg+xml'
    ).documentElement;

    const centerMarker = new AdvancedMarkerElement({
        position: initialCenter,
        title: 'A marker using a custom SVG image.',
        anchorLeft: '-50%',
        anchorTop: '-50%',
    });
    centerMarker.append(pinSvg);
    mapElement.append(centerMarker);

    // Wait for the map to finish drawing its tiles.
    event.addListenerOnce(innerMap, 'tilesloaded', () => {
        // Get the controls div
        const controls = document.getElementById('control-panel');

        // Display controls once map is loaded.
        if (controls) {
            controls.style.display = 'block';
        }
    });

    // Add event listener to update the radius based on user selection.
    buttons.forEach((button) => {
        button.addEventListener('change', (changeEvent) => {
            const target = changeEvent.target as HTMLInputElement;
            walkingCircle.setRadius(Number(target.value));
        });
    });

    // Handle user click, reset the map center and position the circle.
    innerMap.addListener(
        'click',
        (
            mapsMouseEvent:
                google.maps.MapMouseEvent | google.maps.IconMouseEvent
        ) => {
            const newCenter = mapsMouseEvent.latLng;
            if (!newCenter) return;
            walkingCircle.setCenter(newCenter);
            centerMarker.position = newCenter;
            innerMap.panTo(newCenter);
        }
    );

    // Handle user dragging the circle, update the center marker position.
    walkingCircle.addListener('center_changed', () => {
        centerMarker.position = walkingCircle.getCenter();
    });
}

void init();

JavaScript

const mapElement = document.querySelector('gmp-map');
let innerMap;

async function init() {
    // Request needed libraries.
    const [{ Circle }, { AdvancedMarkerElement }, { event }] =
        await Promise.all([
            google.maps.importLibrary('maps'),
            google.maps.importLibrary('marker'),
            google.maps.importLibrary('core'),
        ]);

    // Set the initial map center point.
    const initialCenter = { lat: 34.98956821576194, lng: 135.74239981260283 }; // Hotel Emion, Kyoto, Japan

    // Get the inner map.
    innerMap = mapElement.innerMap;

    // Get the buttons.
    const buttons = document.querySelectorAll('input[name="radius"]');

    // Create the circle.
    const walkingCircle = new Circle({
        strokeColor: '#ffdd00ff',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#ffdd00ff',
        fillOpacity: 0.35,
        map: innerMap,
        center: initialCenter,
        radius: 400,
        draggable: true,
        editable: false,
    });

    // Define a "Crosshair" vector icon
    const parser = new DOMParser();
    const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-6 -6 12 12"><path d="M -6,0 L 6,0 M 0,-6 L 0,6" stroke="black" stroke-width="1"/></svg>`;

    const pinSvg = parser.parseFromString(
        svgString,
        'image/svg+xml'
    ).documentElement;

    const centerMarker = new AdvancedMarkerElement({
        position: initialCenter,
        title: 'A marker using a custom SVG image.',
        anchorLeft: '-50%',
        anchorTop: '-50%',
    });
    centerMarker.append(pinSvg);
    mapElement.append(centerMarker);

    // Wait for the map to finish drawing its tiles.
    event.addListenerOnce(innerMap, 'tilesloaded', () => {
        // Get the controls div
        const controls = document.getElementById('control-panel');

        // Display controls once map is loaded.
        if (controls) {
            controls.style.display = 'block';
        }
    });

    // Add event listener to update the radius based on user selection.
    buttons.forEach((button) => {
        button.addEventListener('change', (changeEvent) => {
            const target = changeEvent.target;
            walkingCircle.setRadius(Number(target.value));
        });
    });

    // Handle user click, reset the map center and position the circle.
    innerMap.addListener('click', (mapsMouseEvent) => {
        const newCenter = mapsMouseEvent.latLng;
        if (!newCenter) return;
        walkingCircle.setCenter(newCenter);
        centerMarker.position = newCenter;
        innerMap.panTo(newCenter);
    });

    // Handle user dragging the circle, update the center marker position.
    walkingCircle.addListener('center_changed', () => {
        centerMarker.position = walkingCircle.getCenter();
    });
}

void init();

CSS

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#control-panel {
    display: none; /* Set to 'display: block' after the map loads. */
    background-color: #fff;
    border: 2px solid #fff;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    font-family: 'Roboto', sans-serif;
    font-size: medium;
    margin: 10px;
    padding: 10px;
}

HTML

<html>
    <head>
        <title>Circles</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map
            center="34.98956821576194, 135.74239981260283"
            zoom="15"
            map-id="DEMO_MAP_ID">
            <div id="control-panel" slot="control-inline-start-block-start">
                <input
                    id="short-walk"
                    type="radio"
                    name="radius"
                    value="400"
                    checked />
                <label for="short-walk">Short Walk (~5 minutes)</label><br />
                <input
                    id="medium-walk"
                    type="radio"
                    name="radius"
                    value="800" />
                <label for="medium-walk">Medium Walk (~15 minutes)</label><br />
                <input id="long-walk" type="radio" name="radius" value="1600" />
                <label for="long-walk">Long Walk (~30 minutes) </label>
            </div>
        </gmp-map>
    </body>
</html>
Visualizza esempio

Rimuovi una cerchia

Per rimuovere un cerchio dalla mappa, chiama il metodo setMap() passando null come argomento.

circle.setMap(null);

Tieni presente che il metodo sopra descritto non elimina la cerchia. Rimuove il cerchio dalla mappa. Se invece vuoi eliminare il cerchio, devi rimuoverlo dalla mappa e poi impostarlo su null.

Forme modificabili e trascinabili dall'utente

Se rendi modificabile una forma, vengono aggiunti dei punti di manipolazione che gli utenti possono utilizzare per riposizionare, rimodellare e ridimensionare la forma direttamente sulla mappa. Puoi anche rendere una forma trascinabile, in modo che gli utenti possano spostarla in un altro punto della 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 autonomamente.

Rendi modificabile una forma

Qualsiasi forma (polilinee, poligoni, cerchi e rettangoli) può essere impostata 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
});

Visualizza esempio

Rendi trascinabile una forma

Per impostazione predefinita, una forma disegnata sulla mappa avrà una posizione fissa. Per consentire agli utenti di trascinare una forma in un'altra posizione 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 una polilinea, devi anche considerare di rendere il poligono o la polilinea geodetici, impostando la relativa proprietà geodesic su true.

Un poligono geodetico manterrà la sua vera forma geografica quando viene spostato, facendo apparire il poligono distorto quando viene spostato verso nord o verso sud nella proiezione di Mercatore. I poligoni non geodetici mantengono sempre l'aspetto iniziale sullo schermo.

In una polilinea geodetica, i segmenti della polilinea vengono disegnati come il percorso più breve tra due punti sulla superficie della Terra, supponendo che la Terra sia una sfera, anziché come linee rette sulla proiezione di Mercatore.

Per ulteriori informazioni sui sistemi di coordinate, consulta la guida alle coordinate della mappa e dei riquadri.

La mappa seguente mostra due triangoli di dimensioni e proporzioni approssimativamente uguali. Il triangolo rosso ha la proprietà geodesic impostata su true. Notate come cambia la sua forma mentre si sposta verso nord.

Visualizza esempio

Ascolta gli eventi di modifica

Quando una forma viene modificata, viene attivato un evento al termine della modifica. Questi eventi sono elencati di seguito.

Forma Eventi
Cerchio radius_changed
center_changed
Poligono insert_at
remove_at
set_at

Il listener deve essere impostato sul percorso del poligono. Se il poligono ha più percorsi, è necessario impostare un listener su ogni percorso.
Polilinea insert_at
remove_at
set_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.');
});

Guarda un esempio di gestione di un evento di modifica su un rettangolo: visualizza l'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 Attivato ripetutamente mentre l'utente trascina la forma.
dragend Attivato quando l'utente interrompe il trascinamento della forma.

Per saperne di più sulla gestione degli eventi, consulta la documentazione sugli eventi.

Geofence e confini delle zone sicure

Google Maps Platform non fornisce un'API Geofencing autonoma. Per visualizzare un raggio di geofencing o una zona sicura su una mappa web e verificare se una coordinata in tempo reale si trova all'interno di quel confine, combina le forme con la libreria Geometry (google.maps.GeometryLibrary) caricata tramite google.maps.importLibrary("geometry"):

L'esempio seguente disegna una zona sicura circolare e un recinto virtuale poligonale, quindi controlla se una coordinata in tempo reale si trova all'interno di ciascun confine:

const {Circle, Polygon} = await google.maps.importLibrary("maps");
const {poly} = await google.maps.importLibrary("geometry");

const livePosition = {lat: 37.424, lng: -122.085};

// 1. Circular geofence (500-meter radius)
const circularGeofence = new Circle({
  map,
  center: {lat: 37.422, lng: -122.084},
  radius: 500,
});
const isInsideCircle = poly.containsLocation(livePosition, circularGeofence);

// 2. Polygonal geofence
const polygonGeofence = new Polygon({
  map,
  paths: [
    {lat: 37.420, lng: -122.088},
    {lat: 37.420, lng: -122.080},
    {lat: 37.426, lng: -122.080},
    {lat: 37.426, lng: -122.088},
  ],
});
const isInsidePolygon = poly.containsLocation(livePosition, polygonGeofence);