Kształty

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Wybierz platformę: Android iOS JavaScript

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

Linie łamane

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

Dodawanie linii łamanej

Konstruktor Polyline przyjmuje zestaw PolylineOptions określający współrzędne LatLng i zestaw stylów, aby dostosować wizualizację linii łamanej.

Obiekty Polyline są rysowane na mapie jako serie prostych segmentów. Podczas tworzenia linii możesz określić własne kolory, wagi i przezroczystość kreski w obrębie znaczników PolylineOptions. Możesz też zmienić te właściwości po ukończeniu kompilacji. Linia łamana obsługuje następujące style kreski:

  • strokeColor określa szesnastkowy kod HTML w formacie "#FFFFFF". Klasa Polyline nie obsługuje nazw kolorów.
  • strokeOpacity określa wartość liczbową między 0.0 a 1.0, aby określić przezroczystość koloru linii. Domyślnym ustawieniem jest 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 edytowane przez użytkowników poniżej. Podobnie możesz skonfigurować właściwość draggable, aby umożliwić użytkownikom przeciąganie linii.

TypeScript

// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 3,
      center: { lat: 0, lng: -180 },
      mapTypeId: "terrain",
    }
  );

  const flightPlanCoordinates = [
    { lat: 37.772, lng: -122.214 },
    { lat: 21.291, lng: -157.821 },
    { lat: -18.142, lng: 178.431 },
    { lat: -27.467, lng: 153.027 },
  ];
  const flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2,
  });

  flightPath.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 3,
    center: { lat: 0, lng: -180 },
    mapTypeId: "terrain",
  });
  const flightPlanCoordinates = [
    { lat: 37.772, lng: -122.214 },
    { lat: 21.291, lng: -157.821 },
    { lat: -18.142, lng: 178.431 },
    { lat: -27.467, lng: 153.027 },
  ];
  const flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2,
  });

  flightPath.setMap(map);
}

window.initMap = initMap;
Zobacz przykład

Fragment

Usuwanie linii łamanej

Aby usunąć z mapy linię łamaną, wywołaj metodę setMap() przekazującą null jako argument. W tym przykładzie flightPath jest obiektem łamanym:

flightPath.setMap(null);

Pamiętaj, że ta metoda nie powoduje usunięcia linii łamanej. Spowoduje to usunięcie z Mapy linii łamanej. Jeśli chcesz usunąć linię łamaną, usuń ją z mapy, a następnie ustaw linię jako null.

Badanie linii łamanej

Linia łamana określa serię współrzędnych jako tablicę 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 edytować i sprawdzać tablicę za pomocą tych operacji:

  • getAt() zwraca LatLng przy określonej wartości indeksu opartej na zero.
  • insertAt() wstawia przesłaną wartość LatLng w określonej wartości indeksu opartej na zero. Pamiętaj, że wszystkie obecne współrzędne o tej wartości indeksu zostaną przeniesione.
  • removeAt() usuwa LatLng przy określonej wartości indeksu opartej na zero.

TypeScript

// This example creates an interactive map which constructs a polyline based on
// user clicks. Note that the polyline only appears once its path property
// contains two LatLng coordinates.

let poly: google.maps.Polyline;
let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 7,
    center: { lat: 41.879, lng: -87.624 }, // Center the map on Chicago, USA.
  });

  poly = new google.maps.Polyline({
    strokeColor: "#000000",
    strokeOpacity: 1.0,
    strokeWeight: 3,
  });
  poly.setMap(map);

  // Add a listener for the click event
  map.addListener("click", addLatLng);
}

// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event: google.maps.MapMouseEvent) {
  const path = poly.getPath();

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

  // Add a new marker at the new plotted point on the polyline.
  new google.maps.Marker({
    position: event.latLng,
    title: "#" + path.getLength(),
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

// This example creates an interactive map which constructs a polyline based on
// user clicks. Note that the polyline only appears once its path property
// contains two LatLng coordinates.
let poly;
let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 7,
    center: { lat: 41.879, lng: -87.624 }, // Center the map on Chicago, USA.
  });
  poly = new google.maps.Polyline({
    strokeColor: "#000000",
    strokeOpacity: 1.0,
    strokeWeight: 3,
  });
  poly.setMap(map);
  // Add a listener for the click event
  map.addListener("click", addLatLng);
}

// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event) {
  const path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng);
  // Add a new marker at the new plotted point on the polyline.
  new google.maps.Marker({
    position: event.latLng,
    title: "#" + path.getLength(),
    map: map,
  });
}

window.initMap = initMap;
Zobacz przykład

Fragment

Dostosowywanie linii łamanej

Na linii łamanej możesz dodawać obrazy wektorowe w postaci symboli. Dzięki połączeniu symboli i klasy PolylineOptions masz dużą kontrolę nad wyglądem i stylami linii łamanych na mapie. W sekcji Symbole znajdziesz informacje na temat strzałek, linii przerywanych, symboli niestandardowych i animowanych symboli.

Wielokąty

Wielokąt reprezentuje obszar zamknięty dla ścieżki (lub pętli), która jest zdefiniowana w szeregu współrzędnych. Obiekty Polygon są podobne do obiektów Polyline, ponieważ składają się z szeregu współrzędnych w ułożonej kolejności. Wielokąty są rysowane kreską i wypełnieniem. Możesz zdefiniować niestandardowe kolory, wagi i przezroczystości krawędzi wielokąta (kreski) oraz niestandardowych kolorów i przezroczystości dla zamkniętego obszaru (wypełnienia). Kolory powinny być podawane w formacie szesnastkowym HTML. Nazwy kolorów nie są obsługiwane.

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

  • Wiele nieciągłych obszarów zdefiniowanych przez jeden wielokąt.
  • Obszary z otworami.
  • Skrzyżowania z jednego lub kilku obszarów.

Aby zdefiniować złożony kształt, musisz użyć wielokąta o wielu ścieżkach.

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

Dodaj wielokąt

Obszar wielokątny może zawierać kilka oddzielnych ścieżek, dlatego właściwość paths obiektu Polygon określa tablicę tablic, z których każdy jest typu MVCArray. Każda tablica definiuje osobną sekwencję kolejności LatLng.

W przypadku prostych wielokątów składających się tylko z jednej ścieżki możesz utworzyć Polygon za pomocą jednej tablicy współrzędnych LatLng. Interfejs Maps JavaScript API przekształci prostą tablicę w tablicę po utworzeniu podczas przechowywania jej we właściwości paths. Interfejs API udostępnia prostą metodę getPath() dla wielokątów składającej się z jednej ścieżki.

Właściwość wielokąta editable określa, czy użytkownicy mogą edytować kształt. Zobacz poniżej edytowalne kształty edytowane przez użytkowników. Podobnie możesz skonfigurować właściwość draggable, aby umożliwić użytkownikom przeciąganie kształtu.

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;
Zobacz przykład

Fragment

Autouzupełnianie wielokątów

Parametr Polygon w powyższym przykładzie składa się z 4 zestawów współrzędnych LatLng, ale pamiętaj, że pierwszy i ostatni zestaw definiują tę samą lokalizację, co powoduje zapętlenie. W praktyce jednak wielokąty definiują zamknięte obszary, więc nie musisz podawać ostatniego zestawu współrzędnych. Interfejs Maps JavaScript API automatycznie ukończy wielokąt, narysowając kreski łączące ostatnią lokalizację z powrotem do pierwszej lokalizacji na danej ścieżce.

Poniższy przykład jest taki sam jak poprzedni, z pominięciem ostatnich LatLng: wyświetl przykład.

Usuwanie wielokąta

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

bermudaTriangle.setMap(null);

Pamiętaj, że ta metoda nie usuwa wielokąta. Powoduje to usunięcie wielokąta z mapy. Jeśli chcesz usunąć wielokąt, usuń go z mapy, a następnie ustaw jego wielokąt null.

Badanie wielokąta

Wielokąt określa szereg współrzędnych jako tablicę tablicy, w której każda ma typ MVCArray. Każda tablica "leaf" jest tablicą współrzędnych LatLng określających jedną ścieżkę. Aby pobrać te współrzędne, wywołaj metodę Polygon obiekt getPaths(). Tablica to MVCArray, więc musisz zmodyfikować ją i zbadać przy użyciu tych operacji:

  • getAt() zwraca LatLng przy określonej wartości indeksu opartej na zero.
  • insertAt() wstawia przesłaną wartość LatLng w określonej wartości indeksu opartej na zero. Pamiętaj, że wszystkie obecne współrzędne o tej wartości indeksu zostaną przeniesione.
  • removeAt() usuwa LatLng przy określonej wartości indeksu opartej na 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;
Zobacz przykład

Fragment

Umieść wielobok w wielokątze

Aby utworzyć pusty obszar w obrębie wielokąta, musisz utworzyć 2 ścieżki – jedną po drugiej. Aby utworzyć otwór, współrzędne, które definiują ścieżkę wewnętrzną, muszą być w odwrotnej kolejności niż współrzędne. Jeśli na przykład współrzędne zewnętrzne są ustawione w kierunku przeciwnym do ruchu wskazówek zegara, wewnętrzna ścieżka musi być przeciwnie do ruchu wskazówek zegara.

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

W poniższym przykładzie wielokąt został nałożony na 2 ścieżki, a ścieżka wewnętrzna została zaokrąglona w kierunku przeciwnym do ścieżki zewnętrznej.

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;
Zobacz przykład

Fragment

Prostokąty

Oprócz ogólnej klasy Polygon interfejs API Map Google JavaScript zawiera konkretną klasę obiektów Rectangle, aby uprościć ich konstrukcję.

Dodaj prostokąt

Rectangle jest podobna do Polygon, w której możesz zdefiniować niestandardowe kolory, grubości i przezroczystości krawędzi krawędzi prostokąta oraz niestandardowe kolory i nieprzezroczystości obszaru wewnątrz prostokąta (wypełnienie). Kolory powinny być szesnastkowe.

W przeciwieństwie do właściwości Polygon nie definiujesz wartości paths dla elementu Rectangle. Zamiast tego prostokąt ma właściwość bounds, która definiuje 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 edytowalne kształty edytowane przez użytkowników poniżej. Podobnie możesz ustawić właściwość draggable, aby umożliwić użytkownikom przeciąganie prostokąta.

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;
Zobacz przykład

Fragment

Ten kod tworzy prostokąt za każdym razem, gdy użytkownik powiększy mapę. Rozmiar prostokąta określa widoczny obszar.

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;
Zobacz przykład

Fragment

Usuwanie prostokąta

Aby usunąć prostokąt z mapy, wywołaj metodę setMap() przekazującą null jako argument.

rectangle.setMap(null);

Pamiętaj, że ta metoda nie powoduje usunięcia prostokąta. Powoduje to usunięcie prostokąta z mapy. Jeśli chcesz usunąć prostokąt, usuń go z mapy, a potem ustaw null na prostokąt.

Okręgi

Oprócz ogólnej klasy Polygon interfejs Google Maps JavaScript API zawiera konkretną klasę obiektów Circle, aby uprościć ich konstrukcję.

Dodaj kółko

Circle jest podobny do Polygon, ponieważ możesz zdefiniować niestandardowe kolory, wagi i przezroczystości krawędzi okręgu oraz niestandardowe kolory i przezroczystości w obrębie okręgu (wypełnienie). Kolory powinny być szesnastkowe.

W przeciwieństwie do właściwości Polygon nie definiujesz wartości paths dla elementu Circle. Zamiast tego kółko ma 2 dodatkowe właściwości, które definiują jego kształt:

  • center określa google.maps.LatLng środkowego okręgu.
  • radius określa promień koła w metrach.

Właściwość editable koła określa, czy użytkownicy mogą edytować kształt. Zobacz poniżej edytowalne kształty edytowane przez użytkowników. Podobnie możesz ustawić właściwość draggable, aby użytkownicy mogli przeciągać okrąg.

TypeScript

// This example creates circles on the map, representing populations in North
// America.

// First, create an object containing LatLng and population for each city.

interface City {
  center: google.maps.LatLngLiteral;
  population: number;
}

const citymap: Record<string, City> = {
  chicago: {
    center: { lat: 41.878, lng: -87.629 },
    population: 2714856,
  },
  newyork: {
    center: { lat: 40.714, lng: -74.005 },
    population: 8405837,
  },
  losangeles: {
    center: { lat: 34.052, lng: -118.243 },
    population: 3857799,
  },
  vancouver: {
    center: { lat: 49.25, lng: -123.1 },
    population: 603502,
  },
};

function initMap(): void {
  // Create the map.
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: 37.09, lng: -95.712 },
      mapTypeId: "terrain",
    }
  );

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (const city in citymap) {
    // Add the circle for this city to the map.
    const cityCircle = new google.maps.Circle({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100,
    });
  }
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

const citymap = {
  chicago: {
    center: { lat: 41.878, lng: -87.629 },
    population: 2714856,
  },
  newyork: {
    center: { lat: 40.714, lng: -74.005 },
    population: 8405837,
  },
  losangeles: {
    center: { lat: 34.052, lng: -118.243 },
    population: 3857799,
  },
  vancouver: {
    center: { lat: 49.25, lng: -123.1 },
    population: 603502,
  },
};

function initMap() {
  // Create the map.
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: 37.09, lng: -95.712 },
    mapTypeId: "terrain",
  });

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (const city in citymap) {
    // Add the circle for this city to the map.
    const cityCircle = new google.maps.Circle({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100,
    });
  }
}

window.initMap = initMap;
Zobacz przykład

Fragment

Usuwanie koła

Aby usunąć okrąg z mapy, wywołaj metodę setMap() przekazującą null jako argument.

circle.setMap(null);

Pamiętaj, że ta metoda nie usuwa koła. Spowoduje to usunięcie okręgu z mapy. Jeśli chcesz usunąć okrąg, usuń go z mapy, a następnie ustaw kółko na null.

Edytowalne i przeciągane kształty użytkownika

Możliwość edytowania kształtu pozwala dodać do niego uchwyty, które pozwalają zmieniać położenie, zmieniać kształt i zmieniać jego rozmiar bezpośrednio na mapie. Kształt możesz też przeciągać, aby użytkownicy mogli przenieść go w inne miejsce na mapie.

Zmiany wprowadzane przez użytkownika w obiekcie nie są zachowywane po zakończeniu sesji. Jeśli chcesz zapisać zmiany wprowadzone przez użytkownika, musisz samodzielnie zarejestrować i zapisać te informacje.

Włączanie możliwości edytowania kształtu

Każdy kształt (wielokąty, wielokąty, okręgi i prostokątne) można ustawić jako edytowane przez ustawienie parametru 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łtów

Domyślnie kształt narysowany na mapie ma stałą pozycję. Aby umożliwić użytkownikom przeciąganie kształtu do innej lokalizacji na mapie, w opcjach kształtów 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łączając przeciąganie wielokąta lub linii łamanej, warto rozważyć ustawienie wielokąta lub polilinei przez ustawienie właściwości geodesic na true.

Po przesunięciu wielokątny geometryczny zachowa swój prawdziwy kształt, co spowoduje zniekształcenie tego wielokąta w jego kierunku na północ lub południe w odwzorowaniu Merkatora. Niegeometryczne wielokąty zawsze będą początkowo widoczne na ekranie.

W przypadku geoliny liniowej segmenty linii łamanej są rysowane jako najkrótsza ścieżka między 2 punktami na powierzchni Ziemi, przy założeniu, że Ziemia jest kulą, a nie zwykłymi liniami na odwzorowaniu Mercator.

Więcej informacji o układach współrzędnych znajdziesz w przewodniku dotyczącym współrzędnych map i kafelków.

Poniższa mapa przedstawia 2 trójkąty o tym samym rozmiarze i wymiarach. Czerwony trójkąt ma właściwość geodesic ustawioną na true. Zwróć uwagę na to, że kształt porusza się w kierunku północnym.

Zobacz przykład

słuchanie edycji wydarzeń.

Podczas edytowania kształtu zdarzenie jest wywoływane po zakończeniu edycji. Te zdarzenia są wymienione poniżej.

Kształt Zdarzenia
Okrąg radius_changed
center_changed
Wielokąt insert_at
remove_at
set_at

Detektor musi być ustawiony na ścieżce wielokąta. Jeśli wielokąt ma wiele ścieżek, należy ustawić odbiornik w każdej ścieżce.

Linia łamana insert_at
remove_at
set_at

Detektor musi być ustawiony na ścieżce łamanej.

Prostokąt bounds_changed

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 na prostokątie: zobacz przykład.

Słuchanie przeciągania zdarzeń

Po przeciągnięciu kształtu zdarzenia są uruchamiane na początku i na końcu działania przeciągania oraz w trakcie jego przeciągania. Poniższe zdarzenia są uruchamiane w przypadku linii łamanych, wielokątów, okręgów i prostokątów.

Zdarzenie Opis
dragstart Uruchamiane, gdy użytkownik zacznie przeciągać kształt.
drag Uruchamiane wielokrotnie, gdy użytkownik przeciąga kształt.
dragend Uruchamiane, gdy użytkownik przestanie przeciągać kształt.

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