Kształty i linie

Wybierz platformę: Android iOS JavaScript

Do mapy możesz dodawać różne kształty. Kształt to obiekt na mapie powiązany ze współrzędnymi geograficznymi. Dostępne są te kształty: linie, wielokąty, koła i prostokąty. Możesz też skonfigurować kształty tak, 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 lokalizacji LatLng i tworzy serię odcinków linii, które łączą te lokalizacje w uporządkowanej sekwencji.

Dodawanie linii łamanej

Konstruktor Polyline przyjmuje zbiór PolylineOptions określający współrzędne LatLng linii oraz zbiór stylów służących do dostosowywania zachowania wizualnego wielokąta.

Obiekty Polyline są na mapie wyświetlane jako seria prostych odcinków. Podczas tworzenia linii możesz określić niestandardowe kolory, grubość i przezroczystość kreski linii w elementach PolylineOptions. Możesz też zmienić te właściwości po zakończeniu tworzenia. Polilinia obsługuje te style obrysu:

  • 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 0.0–1.0, która określa przezroczystość koloru linii. Wartość domyślna to 1.0.
  • strokeWeight określa szerokość linii w pikselach.

Właściwość editable ścieżki złożonej określa, czy użytkownicy mogą edytować kształt. Poniżej znajdziesz kształty, które użytkownik może edytować. Podobnie możesz ustawić 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;
index.ts

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

Wypróbuj próbkę

Usuwanie linii łamanej

Aby usunąć polilinię z mapy, wywołaj metodę setMap(), podając jako argument null. W tym przykładzie flightPath to obiekt ścieżki złożonej:

flightPath.setMap(null);

Pamiętaj, że powyższa metoda nie usuwa polilinii. Usuwa linię łamaną z mapy. Jeśli chcesz usunąć linię łamaną, musisz ją usunąć z mapy, a następnie ustawić dla niej wartość null.

Sprawdzanie linii łamanej

Wielokąt 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 funkcję getPath(), która zwróci tablicę typu MVCArray. Tablicą możesz manipulować i ją sprawdzać, wykonując te operacje:

  • getAt() zwraca LatLng przy danym indeksie opartym na 0.
  • insertAt() wstawia przekazaną wartość LatLng na pozycji indeksu o wartości 0. Pamiętaj, że wszystkie istniejące współrzędne o tej wartości indeksu zostaną przesunięte do przodu.
  • removeAt() usuwa element LatLng o danej wartości indeksu (licząc od 0).

TypeScript

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

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

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

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

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

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

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

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

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

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

Wypróbuj próbkę

Dostosowywanie linii łamanej

Do polilinii możesz dodawać obrazy wektorowe w postaci symboli. Dzięki połączeniu symboli i klasy PolylineOptions masz dużą kontrolę nad wyglądem i wygodą korzystania z linii na mapie. Więcej informacji o strzałkach, liniach przerywanych, symbolach niestandardowych i symbolach animowanych znajdziesz w sekcji Symbole.

Wielokąty

Wielokąt reprezentuje obszar zamknięty przez zamkniętą ścieżkę (lub pętlę), która jest zdefiniowana przez serię współrzędnych. Obiekty Polygon są podobne do obiektów Polyline, ponieważ składają się z sekwencji współrzędnych. Wielokąty są rysowane za pomocą obrysu i wypełnienia. Możesz zdefiniować niestandardowe kolory, grubość i przezroczystość boków wielokąta (kreski) oraz niestandardowe kolory i przezroczystość objętego obszaru (wypełnienie). Kolory należy wskazać w formacie szesnastkowym HTML. Nazwy kolorów nie są obsługiwane.

Polygon obiekty mogą opisywać złożone kształty, takie jak:

  • Wiele obszarów niesąsiadujących zdefiniowanych przez jeden wielokąt.
  • obszary z dziurami.
  • Przecięcie co najmniej 2 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. Zajmuje się ona tworzeniem łagodnych krzywych, ułatwiając rysowanie wielokątów z otworami. Zapoznaj się z dokumentacją warstwy danych.

Dodaj wielokąt

Ponieważ obszar wielokątny może zawierać kilka oddzielnych ścieżek, właściwość paths obiektu Polygon określa tablicę tablic, z których każda ma typ MVCArray. Każda tablica definiuje osobną sekwencję uporządkowanych współrzędnych LatLng.

W przypadku prostych wielokątów składających się tylko z jednej ścieżki możesz utworzyć Polygon, używając pojedynczego tablicę współrzędnych LatLng. Interfejs Maps JavaScript API przekształci prostą tablicę w tablicę tablic podczas tworzenia i zapisywania jej w atrybucie paths. Interfejs API udostępnia prostą metodę getPath() do wielokątów składających się z 1 ścieżki.

Właściwość editable wielokąta określa, czy użytkownicy mogą edytować jego kształt. Poniżej znajdziesz kształty, które użytkownik może edytować. Podobnie możesz ustawić 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;
index.ts

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

Wypróbuj próbkę

Autouzupełnianie w Polygon

W przykładzie powyżej Polygon składa się z 4 zbiorów współrzędnych LatLng, ale zwróć uwagę, że pierwszy i ostatni zbiór definiują tę samą lokalizację, co powoduje zamknięcie pętli. W praktyce jednak, ponieważ wielokąty definiują zamknięte obszary, nie musisz podawać ostatniego zestawu współrzędnych. Interfejs Maps JavaScript API automatycznie uzupełnia wielokąt, rysując ścieżkę łączącą ostatnią lokalizację z pierwszą lokalizacją na dowolnej ścieżce.

Ten przykład jest identyczny z poprzednim, z tą różnicą, że ostatni element LatLng został pominięty:zobacz przykład.

Usuwanie wielokąta

Aby usunąć wielokąt z mapy, wywołaj metodę setMap(), podając jako argument null. W tym przykładzie bermudaTriangle to obiekt wieloboku:

bermudaTriangle.setMap(null);

Pamiętaj, że powyższa metoda nie powoduje usunięcia wielokąta. Usuwa wielokąt z mapy. Jeśli chcesz usunąć wielokąt, usuń go z mapy, a następnie ustaw dla niego wartość null.

Sprawdzanie wielokąta

Wielokąt określa swoją serię współrzędnych jako tablicę tablic, w której każda tablica ma typ MVCArray. Każda tablica „liść” to tablica współrzędnych LatLng określająca pojedynczą ścieżkę. Aby pobrać te współrzędne, wywołaj metodę getPaths() obiektu Polygon. Ponieważ tablica jest typu MVCArray, musisz ją modyfikować i sprawdzać za pomocą tych operacji:

  • getAt() zwraca LatLng przy danej wartości indeksu (licząc od zera).
  • insertAt() wstawia przekazaną wartość LatLng na pozycji indeksu o wartości 0. Pamiętaj, że wszystkie istniejące współrzędne o tej wartości indeksu zostaną przesunięte do przodu.
  • removeAt() usuwa element LatLng o danej wartości indeksu (licząc od 0).

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

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

Wypróbuj próbkę

Tworzenie otworu w wielokącie

Aby utworzyć pustą przestrzeń w poligonie, musisz utworzyć 2 ścieżki: jedną wewnątrz drugiej. Aby utworzyć otwór, współrzędne definiujące ścieżkę wewnętrzną muszą być w odwrotnej kolejności niż te definiujące ścieżkę zewnętrzną. Jeśli na przykład współrzędne ścieżki zewnętrznej są uporządkowane zgodnie z ruchem wskazówek zegara, ścieżka wewnętrzna musi być uporządkowana przeciwnie do ruchu wskazówek zegara.

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

W tym przykładzie rysowany jest wielokąt z 2 ścieżkami, przy czym ścieżka wewnętrzna jest narysowana w przeciwnym kierunku niż ścieżka zewnętrzna.

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

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

Wypróbuj próbkę

Prostokąty

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

Dodawanie prostokąta

Rectangle jest podobny do Polygon, ponieważ możesz zdefiniować niestandardowe kolory, grubość i przezroczystość boków prostokąta (kreski) oraz niestandardowe kolory i przezroczystość obszaru wewnątrz prostokąta (wypełnienie). Kolory należy oznaczać w systemie szesnastkowym w formacie HTML.

W odróżnieniu od Polygon w przypadku Rectangle nie musisz definiować wartości paths. Zamiast tego prostokąt ma właściwość bounds, która określa jego kształt przez podanie google.maps.LatLngBounds.

Właściwość editable prostokąta określa, czy użytkownicy mogą edytować kształt. Poniżej znajdziesz kształty, które użytkownicy mogą edytować. 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;
index.ts

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

Wypróbuj próbkę

Poniższy kod tworzy prostokąt za każdym razem, gdy użytkownik zmienia powiększenie na mapie. Rozmiar prostokąta jest określany przez 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;
index.ts

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

Wypróbuj próbkę

Usuwanie prostokąta

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

rectangle.setMap(null);

Pamiętaj, że powyższa metoda nie powoduje usunięcia prostokąta. Usunie prostokąt z mapy. Jeśli chcesz usunąć prostokąt, usuń go z mapy, a potem ustaw dla niego wartość null.

Kręgi

Oprócz ogólnej klasy Polygon interfejs Maps JavaScript API zawiera klasę specjalnie do obiektów Circle, aby uprościć ich tworzenie.

Dodawanie kręgu

Circle jest podobny do Polygon, ponieważ możesz zdefiniować niestandardowe kolory, grubość i przezroczystość boków okręgu (kreski) oraz niestandardowe kolory i przezroczystość obszaru wewnątrz okręgu (wypełnienie). Kolory należy oznaczać w systemie szesnastkowym w formacie HTML.

W odróżnieniu od Polygon w przypadku Circle nie musisz definiować wartości paths. Zamiast tego okrąg ma 2 dodatkowe właściwości, które określają jego kształt:

  • center określa google.maps.LatLngśrodka 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. Poniżej znajdziesz kształty, które użytkownik może edytować. Podobnie możesz ustawić właściwość draggable, aby umożliwić użytkownikom przeciąganie koła.

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

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

Wypróbuj próbkę

Usuwanie kręgu

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

circle.setMap(null);

Pamiętaj, że powyższa metoda nie powoduje usunięcia koła. Spowoduje to usunięcie kręgu z mapy. Jeśli chcesz usunąć krąg, musisz usunąć go z mapy, a następnie ustawić dla niego wartość null.

Kształty, które użytkownicy mogą edytować i przeciągać

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

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

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

Każdy kształt (wielokąty, koła i prostokąty) może być ustawiony jako możliwy do edycji przez użytkownika. Aby to zrobić, ustaw wartość 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

Ustawianie kształtu jako elementu przeciąganego

Domyślnie kształt narysowany na mapie będzie mieć stałą pozycję. Aby umożliwić użytkownikom przeciąganie kształtu w inne miejsce na mapie, w opcjach kształtu ustaw wartość 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
});

Jeśli chcesz umożliwić przeciąganie wielokąta lub linii łamanej, rozważ ustawienie właściwości geodesic na true, aby uczynić wielokąt lub linię łamaną geodezyjną.

Poligon geodezyjny zachowuje swój rzeczywisty kształt geograficzny podczas przemieszczania, przez co wydaje się, że jest on zniekształcony, gdy przesuwamy go na północ lub na południe w projekcji Mercatora. Wielokąty niegeodezyjne zawsze zachowują swój początkowy wygląd na ekranie.

W przypadku łańcucha geodezyjnego jego segmenty są rysowane jako najkrótsza droga między 2 punktami na powierzchni Ziemi, przy założeniu, że Ziemia jest kulą, w przeciwieństwie do linii prostych w projekcji Mercatora.

Więcej informacji o systemach współrzędnych znajdziesz w przewodniku Słownik map i kafelków.

Poniższa mapa pokazuje 2 trójkąty o przybliżeniu tej samej wielkości i wymiarach. Właściwość geodesic czerwonego trójkąta ma wartość true. Zwróć uwagę, jak zmienia się jego kształt, gdy przemieszcza się na północ.

Zobacz przykład

Nasłuchiwanie zdarzeń związanych z edytowaniem

Gdy edytujesz kształt, po zakończeniu edycji uruchamiane jest zdarzenie. Te zdarzenia znajdziesz poniżej.

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

Listener musi być ustawiony na ścieżce wielokąta. Jeśli wielokąt ma wiele ścieżek, na każdej z nich musi być ustawiony listener.
Linia łamana insert_at
remove_at
set_at

Listener musi być ustawiony na ścieżce polilinii.
Prostokąt bounds_changed

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

Przykład obsługi zdarzenia edycji w przypadku prostokąta: view example (przykład wyświetlania).

Nasłuchiwanie zdarzeń związanych z przeciąganiem

Gdy użytkownik przeciąga kształt, zdarzenia są wywoływane na początku i na końcu działania przeciągania, a także podczas przeciągania. W przypadku ścieżek złożonych, wielokątów, kół i prostokątów występują te zdarzenia:

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

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