Kształty i linie

Do mapy możesz dodawać różne kształty. Kształt to obiekt na mapie powiązany ze współrzędną szerokości i długości geograficznej. Dostępne są te kształty: linie, wielokąty, okręgi i prostokąty. Możesz też skonfigurować kształty tak, aby użytkownicy mogli je edytować i przeciągać.

Linie łamane

Aby narysować linię na mapie, użyj linii łamanej. Klasa Polyline definiuje nakładkę liniową połączonych segmentów linii na mapie. Obiekt Polyline składa się z tablicy lokalizacji LatLng i tworzy serię segmentów liniowych, które łączą te lokalizacje w uporządkowanej kolejności.

Dodawanie linii łamanej

Konstruktor Polyline wykorzystuje zestaw PolylineOptions, który określa współrzędne LatLng linii oraz zestaw stylów do dostosowania wizualnego zachowania linii łamanej.

Obiekty Polyline są rysowane na mapie jako serie prostych odcinków. Podczas tworzenia linii możesz określić niestandardowe kolory, grubość i przezroczystość kreski linii w obrębie PolylineOptions lub możesz je zmienić po jej utworzeniu. Linia łamana obsługuje następujące style linii:

• strokeColor określa szesnastkowy kod koloru HTML w formacie "#FFFFFF". Klasa Polyline nie obsługuje nazwanych kolorów.
• strokeOpacity określa wartość liczbową z zakresu od 0.0 do 1.0 określającą przezroczystość koloru linii. Wartość domyślna to 1.0.
• strokeWeight określa szerokość linii w pikselach.

Właściwość editable linii łamanej określa, czy użytkownicy mogą edytować kształt. Zobacz kształty możliwe do edytowania przez użytkowników poniżej. Możesz też skonfigurować właściwość draggable tak, aby umożliwiała użytkownikom przeciąganie linii.

// 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

Usuwanie linii łamanej

Aby usunąć linię łamaną z mapy, wywołaj metodę setMap() z argumentem null. W tym przykładzie flightPath jest obiektem linii łamanej:

flightPath.setMap(null);

Pamiętaj, że powyższa metoda nie powoduje usunięcia linii łamanej. Usuwa linię łamaną z mapy. Jeśli zamiast tego chcesz usunąć linię łamaną, usuń ją z mapy, a następnie ustaw linię łamaną na null.

Sprawdzanie linii łamanej

Linia łamana określa serię współrzędnych w postaci tablicy obiektów LatLng. Te współrzędne określają ścieżkę linii. Aby pobrać współrzędne, wywołaj getPath(), który zwróci tablicę typu MVCArray. Możesz manipulować i sprawdzać tablicę za pomocą tych operacji:

• getAt() zwraca wartość LatLng dla danej wartości indeksu liczonej od zera.
• insertAt() wstawia przekazywaną wartość LatLng dla podanej wartości indeksu liczonej od zera. Zauważ, że wszystkie istniejące współrzędne przy tej wartości indeksu są przesuwane do przodu.
• Funkcja removeAt() usuwa wartość LatLng przy danej wartości indeksu liczonej od zera.

// 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

Dostosowywanie linii łamanej

Do linii łamanej możesz dodawać obrazy wektorowe w postaci symboli. Dzięki kombinacji symboli i klasy PolylineOptions masz dużą kontrolę nad wyglądem i działaniem linii łamanych na mapie. Informacje na temat arrows, linii przerywanych, symboli niestandardowych i animowanych znajdziesz w sekcji Symbole.

Wielokąty

Wielokąt reprezentuje obszar otoczony zamkniętą ścieżką (pętlą), który jest definiowany przez serię współrzędnych. Obiekty Polygon są podobne do obiektów Polyline, ponieważ składają się z serii współrzędnych w uporządkowanej kolejności. Wielokąty są rysowane kreską i wypełnieniem. Możesz zdefiniować niestandardowe kolory, grubość i przezroczystość krawędzi wielokąta (kreski) oraz niestandardowe kolory i przezroczystość zamkniętego obszaru (wypełnienia). Kolory należy podawać w formacie szesnastkowym HTML. Nazwy kolorów nie są obsługiwane.

Obiekty Polygon mogą opisywać złożone kształty, w tym:

• Kilka niesąsiadujących ze sobą obszarów zdefiniowanych jednym wielokątem.
• Obszary z dziurami.
• Skrzyżowania jednego lub większej liczby obszarów.

Aby zdefiniować złożony kształt, użyj wielokąta z wieloma ścieżkami.

Uwaga: warstwa danych umożliwia proste rysowanie wielokątów. Obsługuje zawijanie wielokątów, co ułatwia rysowanie wielokątów z otworami. Zapoznaj się z dokumentacją warstwy danych.

Dodaj wielokąt

Obszar wielokątny może zawierać kilka osobnych ścieżek, dlatego właściwość paths obiektu Polygon określa tablicę tablic, z których każda jest typu MVCArray. Każda tablica określa oddzielną sekwencję uporządkowanych współrzędnych LatLng.

W przypadku prostych wielokątów zawierających tylko jedną ścieżkę możesz utworzyć obiekt Polygon, używając jednej tablicy współrzędnych LatLng. Interfejs Maps JavaScript API przekonwertuje prostą tablicę na tablicę podczas budowania, zapisując ją we właściwości paths. W przypadku wielokątów składających się z 1 ścieżki interfejs API udostępnia prostą metodę getPath().

Właściwość editable wielokąta określa, czy użytkownicy mogą edytować kształt. Zobacz kształty możliwe do edytowania przez użytkowników poniżej. W podobny sposób można skonfigurować właściwość draggable tak, aby umożliwiała użytkownikom przeciąganie kształtu.

// 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

Autouzupełnianie wielokątów

Polygon w przykładzie powyżej składa się z 4 zestawów współrzędnych LatLng, ale pamiętaj, że pierwszy i ostatni zestaw określają tę samą lokalizację, która kończy pętlę. W praktyce nie musisz jednak określać ostatniego zestawu współrzędnych, ponieważ wielokąty wyznaczają zamknięte obszary. Interfejs Maps JavaScript API automatycznie uzupełni wielokąt, rysując kreskę łączącą ostatnią lokalizację z pierwszym miejscem dla danej ścieżki.

Poniższy przykład jest taki sam jak poprzedni, z tą różnicą, że pominięto ostatni LatLng: view example (zobacz przykład).

Usuwanie wielokąta

Aby usunąć wielokąt z mapy, wywołaj metodę setMap() z argumentem null. W tym przykładzie bermudaTriangle jest obiektem wielokąta:

bermudaTriangle.setMap(null);

Zwróć uwagę, że powyższa metoda nie powoduje usunięcia wielokąta. Spowoduje to usunięcie wielokąta z mapy. Jeśli zamiast tego chcesz usunąć wielokąt, usuń go z mapy, a potem ustaw wartość null jako wielokąta.

Sprawdzanie wielokąta

Wielokąt określa serię współrzędnych w postaci tablicy tablic, z których każda jest typu MVCArray. Każda tablica „leaf” zawiera tablicę współrzędnych LatLng, która określa jedną ścieżkę. Aby pobrać te współrzędne, wywołaj metodę getPaths() obiektu Polygon. Ponieważ tablica to MVCArray, konieczne będzie manipulowanie i sprawdzenie jej za pomocą tych operacji:

• getAt() zwraca wartość LatLng dla danej wartości indeksu liczonej od zera.
• insertAt() wstawia przekazywaną wartość LatLng dla podanej wartości indeksu liczonej od zera. Zauważ, że wszystkie istniejące współrzędne przy tej wartości indeksu są przesuwane do przodu.
• Funkcja removeAt() usuwa wartość LatLng przy danej wartości indeksu liczonej od zera.

// 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

Wgłębienie dziury w wielokątie

Aby utworzyć pusty obszar w wielokątie, musisz utworzyć 2 ścieżki, jedna wewnątrz drugiej. Aby utworzyć otwór, współrzędne określające ścieżkę wewnętrzną muszą znajdować się w odwrotnej kolejności do tej, która określa ścieżkę zewnętrzną. Jeśli na przykład współrzędne ścieżki zewnętrznej są określone w kierunku zgodnym z ruchem wskazówek zegara, ścieżka wewnętrzna musi być skierowana w lewo.

Uwaga: warstwa danych obsługuje za Ciebie kolejność ścieżek wewnętrznych i zewnętrznych, co ułatwia rysowanie wielokątów z otworami. Zapoznaj się z dokumentacją warstwy danych.

W poniższym przykładzie rysuje się wielokąt z 2 ścieżkami, przy czym ścieżka wewnętrzna jest zakreślona w kierunku przeciwnym do ścieżki zewnętrznej.

// 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

Prostokąty

Oprócz ogólnej klasy Polygon interfejs JavaScript API Map Google zawiera konkretną klasę obiektów Rectangle, aby ułatwić ich tworzenie.

Dodaj prostokąt

Rectangle jest podobny do Polygon, ponieważ możesz definiować niestandardowe kolory, grubość i przezroczystość krawędzi prostokąta (kreskę) oraz niestandardowe kolory i przezroczystość obszaru wewnątrz prostokąta (wypełnienie). Kolory należy podawać za pomocą szesnastkowego stylu liczbowego HTML.

W przeciwieństwie do właściwości Polygon nie musisz zdefiniować właściwości paths dla elementu Rectangle. Prostokąt ma właściwość bounds, która określa jego kształt, podając dla niego właściwość google.maps.LatLngBounds.

Właściwość editable prostokąta określa, czy użytkownicy mogą edytować kształt. Zobacz kształty możliwe do edytowania przez użytkowników poniżej. Możesz też skonfigurować właściwość draggable tak, aby umożliwiała użytkownikom przeciąganie prostokąta.

// 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

Ten kod tworzy prostokąt za każdym razem, gdy użytkownik zmieni powiększenie mapy. Rozmiar prostokąta zależy od widocznego obszaru.

// 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

Usuwanie prostokąta

Aby usunąć prostokąt z mapy, wywołaj metodę setMap() z argumentem null.

rectangle.setMap(null);

Pamiętaj, że powyższa metoda nie powoduje usunięcia prostokąta. Spowoduje to usunięcie prostokąta z mapy. Jeśli zamiast tego chcesz usunąć prostokąt, usuń go z mapy, a następnie ustaw wartość null dla samego prostokąta.

Kółka

Oprócz ogólnej klasy Polygon interfejs JavaScript API Map Google zawiera konkretną klasę obiektów Circle, aby ułatwić ich tworzenie.

Dodaj krąg

Element Circle jest podobny do Polygon, ponieważ możesz zdefiniować niestandardowe kolory, grubość i przezroczystość krawędzi okręgu (kreskę) oraz niestandardowe kolory i przezroczystość obszaru w okręgu (wypełnienie). Kolory powinny być określone za pomocą szesnastkowego liczbowego stylu HTML.

W przeciwieństwie do właściwości Polygon nie musisz zdefiniować właściwości paths dla elementu Circle. Zamiast tego okrąg ma 2 dodatkowe właściwości określające jego kształt:

• center określa google.maps.LatLng środka okręgu.
• radius określa promień okręgu w metrach.

Właściwość editable okręgu określa, czy użytkownicy mogą edytować kształt. Zobacz kształty możliwe do edytowania przez użytkowników poniżej. Możesz też skonfigurować właściwość draggable tak, aby umożliwiała użytkownikom przeciąganie okręgu.

// 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

Usuwanie kręgu

Aby usunąć okrąg z mapy, wywołaj metodę setMap() z argumentem null.

circle.setMap(null);

Pamiętaj, że powyższa metoda nie powoduje usunięcia okręgu. Spowoduje to usunięcie okręgu z mapy. Jeśli zamiast tego chcesz usunąć okrąg, usuń go z mapy, a następnie ustaw wartość null dla jego okręgu.

Edytowalne kształty z możliwością przeciągania przez użytkownika

Możliwość edytowania kształtu powoduje dodanie do niego uchwytów, za pomocą których można zmieniać położenie i kształt kształtu oraz jego rozmiar bezpośrednio na mapie. Możesz też przeciągać kształt, aby użytkownicy mogli go przenosić w inne miejsce na mapie.

Zmiany obiektu wprowadzone przez użytkownika nie są zachowywane między sesjami. Jeśli chcesz zapisać zmiany wprowadzone przez użytkownika, musisz samodzielnie zarejestrować i przechowywać informacje.

Udostępnianie kształtu

Użytkownik może edytować dowolny kształt (linie łamane, wielokąty, okręgi i prostokąty), ustawiając editable na true w opcjach kształtu.

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
});

Zobacz przykład

Możliwość przeciągania kształtu

Domyślnie kształt narysowany na mapie jest ustalany na stałe w danym miejscu. Aby umożliwić użytkownikom przeciąganie kształtu w inne miejsce na mapie, w opcjach kształtu ustaw draggable na true.

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
});

W przypadku włączania przeciągania wielokąta lub linii łamanej warto też ustawić wielokąt lub linię łamaną jako obszar geodezyjny, ustawiając jego właściwość geodesic na true.

Wielokąt geodezyjny zachowuje swój rzeczywisty kształt geograficzny po przeniesieniu, przez co wielokąt jest zniekształcony przy przesuwaniu na północ lub południe w odwzorowaniu Merkatora. Wielokąty niegeodezyjne zawsze zachowują swój początkowy wygląd na ekranie.

W przypadku linii łamanej odcinki linii łamanej są rysowane jako najkrótsza ścieżka między dwoma punktami na powierzchni Ziemi (przy założeniu, że Ziemia jest kulą, a nie liniami prostymi w odwzorowaniu Merkatora).

Więcej informacji na temat układów współrzędnych znajdziesz w przewodniku po mapowaniu i współrzędnych kafelków.

Na poniższej mapie widoczne są 2 trójkąty o mniej więcej jednakowych rozmiarach i wymiarach. Właściwość geodesic czerwonego trójkąta jest ustawiona na true. Zwróć uwagę, jak zmienia się jej kształt, gdy przesuwa się na północ.

Zobacz przykład

Odsłuchiwanie zdarzeń dotyczących edytowania

Podczas edycji kształtu wywoływane jest zdarzenie po zakończeniu edycji. Ich listę znajdziesz poniżej.

Kilka przydatnych fragmentów kodu:

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

Zobacz przykład obsługi zdarzenia edycji prostokąta: zobacz przykład.

Wykrywaj przeciąganie zdarzeń

Przy przeciąganiu kształtu zdarzenia są wywoływane zarówno na początku, jak i na końcu tego przeciągania, a także podczas przeciągania. W przypadku linii łamanych, wielokątów, okręgów i prostokątów wywoływane są poniższe zdarzenia.

Więcej informacji o obsłudze zdarzeń znajdziesz w dokumentacji zdarzeń.