Forme e linee

Puoi aggiungere varie forme alla tua mappa. Una forma è un oggetto sulla mappa, legato 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 modificali o trascinali.

Polilinee

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

Aggiungere una polilinea

Il costruttore Polyline prende un insieme PolylineOptions che specifica LatLng le coordinate della linea e un insieme di stili per regolare comportamento visivo.

Polyline oggetti sono disegnati come una serie di segmenti rette su la mappa. Puoi specificare colori, spessori e opacità personalizzati per il tratto della linea all'interno di PolylineOptions o puoi modificare queste proprietà dopo la costruzione. Una polilinea supporta i seguenti stili di tratto:

• strokeColor specifica un colore HTML esadecimale del formato "#FFFFFF". Il corso Polyline non supporta colori denominati.
• strokeOpacity specifica un valore numerico compreso tra 0.0 e 1.0 per determinare l'opacità della linea colore. Il valore predefinito è 1.0.
• strokeWeight specifica lo spessore della linea in pixel.

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

// 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;
index.ts

// 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;
index.js

Rimuovere una polilinea

Per rimuovere una polilinea dalla mappa, chiama il metodo setMap() passando null come argomento. Nell'esempio seguente, flightPath è un oggetto di una 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, rimuovila dalla mappa e poi imposta della polilinea stessa a null.

Ispezionare una polilinea

Una polilinea specifica una serie di coordinate come una matrice di LatLng oggetti. Queste coordinate determinano il percorso della linea. Per recuperare le coordinate, chiama getPath(), che restituiscono un array di tipo MVCArray. Puoi manipolare e ispezionare l'array utilizzando le seguenti operazioni:

• getAt() restituisce LatLng a un determinato il valore dell'indice in base zero.
• insertAt() inserisce un LatLng superato a un determinato valore di indice in base zero. Tieni presente che qualsiasi le coordinate esistenti in quel valore di indice vengono spostate in avanti.
• removeAt() rimuove un LatLng a un determinato il valore dell'indice in base zero.

// 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;
index.ts

// 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;
index.js

Personalizzare una polilinea

Puoi aggiungere a una polilinea immagini di tipo vettoriale sotto forma di simboli. Con un combinazione di simboli e classe PolylineOptions, hai un controllo elevato sull'aspetto delle polilinee sulla tua mappa. Per informazioni, vedi i simboli. sulle frecce, linee tratteggiate, simboli personalizzati e simboli animati.

Poligoni

Un poligono rappresenta un'area racchiusa da un percorso chiuso (o anello), che definito da una serie di coordinate. Gli oggetti Polygon sono simili a Polyline oggetti in quanto sono costituite da una serie di coordinate in una sequenza ordinata. I poligoni sono disegnati con un tratto e un riempimento. Puoi definire colori personalizzati, ponderazioni e opacità del bordo del poligono (il tratto) e i colori e le opacità dell'area racchiusa (il riempimento). I colori devono essere indicato in formato HTML esadecimale. I nomi dei colori non sono supportati.

Polygon oggetti possono descrivere forme complesse, tra cui:

• Più aree non contigue definite da un singolo poligono.
• Aree in cui sono presenti dei fori.
• Incroci di una o più aree.

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

Nota: il livello dati offre un modo semplice di disegnare poligoni. Gestisce l'avvolgimento dei poligoni al posto tuo, per disegnare poligoni con i fori. Consulta le documentazione per il livello dati.

Aggiungere un poligono

Poiché un'area poligonale può includere diversi percorsi separati, il valore La proprietà paths dell'oggetto Polygon specifica un array di array, ciascuno del tipo MVCArray. Ogni array definisce sequenza separata di coordinate LatLng ordinate.

Per i poligoni semplici costituiti da un solo percorso, puoi: costruisci un Polygon utilizzando un singolo array di Coordinate di LatLng. L'API Maps JavaScript converte l'array semplice in un array di array al momento della creazione, all'interno della proprietà paths. L'API fornisce una semplice Metodo getPath() per i poligoni costituiti da un unico percorso.

La proprietà editable del poligono specifica se gli utenti possono modificare la forma. Vedi le forme modificabili dall'utente di seguito. Analogamente, puoi impostare la proprietà draggable per consentire agli utenti di trascina la forma.

// 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;
index.ts

// 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;
index.js

Completamento automatico poligono

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

L'esempio seguente è identico a quello precedente, tranne che l'ultimo LatLng è stato omesso: visualizza esempio.

Rimuovere 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 illustrato sopra non elimina il poligono. Rimuove il poligono dalla mappa. Se invece vuoi eliminare il poligono, rimuovila dalla mappa e poi imposta poligono stesso a null.

Ispezionare un poligono

Un poligono specifica la sua serie di coordinate come una matrice. dove ogni array è di tipo MVCArray. Ciascuna "foglia" array è un array di coordinate LatLng che specifica un singolo percorso. Per recuperare queste coordinate, chiama il metodo Metodo getPaths() dell'oggetto Polygon. Poiché il è un MVCArray che dovrai manipolare con le seguenti operazioni:

• getAt() restituisce LatLng a un determinato il valore dell'indice in base zero.
• insertAt() inserisce un LatLng superato a un determinato valore di indice in base zero. Tieni presente che qualsiasi le coordinate esistenti in quel valore di indice vengono spostate in avanti.
• removeAt() rimuove un LatLng a un determinato il valore dell'indice in base zero.

// 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;
index.ts

// 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;
index.js

Inserimento di un foro in un poligono

Per creare un'area vuota all'interno di un poligono, devi creare due percorsi, uno dentro l'altro. Per creare il buco, le coordinate che definiscono l'interno di un percorso esterno deve essere in ordine opposto a quello che definisce il percorso esterno. Ad esempio, se le coordinate del percorso esterno sono in ordine orario il percorso interno deve essere in senso antiorario.

Nota: il livello dati gestisce l'ordine dei percorsi interni ed esterni al posto tuo, che consentono di disegnare poligoni con i fori. Consulta le documentazione per il livello dati.

Nell'esempio seguente disegna un poligono con due percorsi, con quello interno ferita nella direzione opposta a quella del percorso esterno.

// 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;
index.ts

// 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;
index.js

Rettangoli

Oltre a una classe Polygon generica, Google Maps L'API JavaScript include una classe specifica Rectangle per semplificarne la costruzione.

Aggiungi un rettangolo

Un Rectangle è simile a un Polygon in che puoi definire colori, ponderazioni e opacità personalizzati per il bordo rettangolo (il tratto) e colori e opacità personalizzati per l'area all'interno rettangolo (il riempimento). I colori devono essere indicati in formato HTML numerico esadecimale stile.

A differenza di Polygon, non definisci paths per un Rectangle. Un rettangolo ha invece un bounds che ne definisce la forma specificando una google.maps.LatLngBounds per il rettangolo.

La proprietà editable del rettangolo specifica se gli utenti possono modificare la forma. Vedi modificabili dall'utente forme qui sotto. Analogamente, puoi impostare la proprietà draggable per consentire agli utenti di trascinare il rettangolo.

// 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;
index.ts

// 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;
index.js

Il seguente codice crea un rettangolo ogni volta che l'utente cambia lo zoom sulla mappa. Le dimensioni del rettangolo sono determinate dall'area visibile.

// 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;
index.ts

// 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;
index.js

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 precedente non elimina il rettangolo. Rimuove il rettangolo dalla mappa. Se invece vuoi eliminare il rettangolo, rimuovila dalla mappa e poi imposta rettangolo a null.

Cerchi

Oltre alla classe generica Polygon, lo strumento L'API JavaScript include una classe specifica Circle per semplificarne la costruzione.

Aggiungi una cerchia

Un Circle è simile a un Polygon in quanto puoi puoi definire colori, opacità e pesi 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 un Circle. Un cerchio ha invece due ulteriori che ne definiscono la forma:

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

La proprietà editable della cerchia specifica se gli utenti possono modificare la forma. Vedi le forme modificabili dall'utente di seguito. Analogamente, puoi impostare la proprietà draggable per consentire agli utenti di trascinare il cerchio.

// 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;
index.ts

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;
index.js

Rimuovere una cerchia

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

circle.setMap(null);

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

Forme modificabili e trascinabili dall'utente

Se rendi una forma modificabile, alla forma aggiungi dei punti di manipolazione che le persone possono utilizzare per riposizionare, rimodellare e ridimensionare la forma direttamente sulla mappa. Puoi anche puoi rendere una forma trascinabile, in modo che le persone possano spostarla in un punto diverso 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 memorizzare le informazioni per te.

Rendere modificabile una forma

È possibile impostare qualsiasi forma (polilinee, poligoni, cerchi e rettangoli) come modificabile dall'utente, impostando editable su true in le 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 una forma trascinabile

Per impostazione predefinita, una forma disegnata sulla mappa sarà fissa. Per consentire agli utenti di trascinare una forma in una posizione diversa sulla mappa, da draggable a true nelle opzioni per la 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 prendere in considerazione creare il poligono o la polilinea geodetica, impostandone geodesic a true.

Un poligono geodetica manterrà la sua vera forma geografica anche quando viene spostato, causando la distorsione del poligono durante lo spostamento verso nord o sud nella proiezione di Mercatore. I poligoni non geodetici manterranno sempre le loro iniziali aspetto sullo schermo.

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

Per ulteriori informazioni sui sistemi di coordinate, consulta la guida alle mappa e riquadro coordinate.

La mappa seguente mostra due triangoli di circa le stesse dimensioni e dimensioni. La proprietà geodesic del triangolo rosso è impostata su true. Nota come la sua forma cambia quando si sposta verso nord.

Visualizza esempio

Ascolta gli eventi di modifica

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

Ecco 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.');
});

Vedi un 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 del trascinamento. così come durante il trascinamento. I seguenti eventi vengono attivati per polilinee, poligoni, cerchi e rettangoli.

Per ulteriori informazioni sulla gestione degli eventi, consulta documentazione sugli eventi.