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, okręgi 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 LatLng lokalizacji i tworzy serię odcinków łączących te lokalizacje w uporządkowanej sekwencji.

Dodawanie linii łamanej

Konstruktor Polyline przyjmuje zbiór PolylineOptions określający LatLng współrzędne linii oraz zbiór stylów, które dostosowują wizualne zachowanie polilinii.

Polyline są rysowane na mapie jako seria prostych odcinków. Podczas tworzenia linii możesz określić niestandardowe kolory, grubość i przezroczystość kreski w PolylineOptions, a także zmienić te właściwości po utworzeniu linii. Linia łamana obsługuje te style linii:

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

Właściwość editable polilinii określa, czy użytkownicy mogą edytować kształt. Więcej informacji znajdziesz w sekcji Kształty, które można edytować poniżej. Podobnie możesz ustawić właściwość draggable, aby zezwolić użytkownikom na przeciąganie linii.

W tym przykładzie tworzymy czerwoną linię łamaną o szerokości 2 pikseli, która pokazuje trasę pierwszego lotu transoceanicznego z Oakland w Kalifornii do Brisbane w Australii.

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

Usuwanie linii łamanej

Aby usunąć polilinię z mapy, wywołaj metodę setMap(), przekazując jako argument wartość null. W tym przykładzie flightPath to obiekt polilinii:

flightPath.setMap(null);

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

Sprawdzanie linii łamanej

Linia łamana określa serię współrzędnych jako tablicę obiektów LatLng. Współrzędne te określają ścieżkę linii. Aby pobrać współrzędne, wywołaj funkcję getPath(), która zwróci tablicę typu MVCArray. Tablicę możesz modyfikować i sprawdzać za pomocą tych operacji:

  • getAt() zwraca LatLng przy danym indeksie liczonym od zera.
  • insertAt() wstawia przekazany element LatLng w miejscu o podanym indeksie liczonym od zera. Pamiętaj, że wszystkie istniejące współrzędne o tej wartości indeksu zostaną przesunięte do przodu.
  • removeAt() usuwa LatLng z określonego indeksu (liczonego od zera).

Ten przykład pokazuje, jak utworzyć linię łamaną na podstawie kliknięć (kliknij mapę, aby dodać wierzchołek).

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

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 polilinii na mapie. Więcej informacji o strzałkach, liniach przerywanych, niestandardowych symbolach i animowanych symbolach znajdziesz w sekcji Symbole.

Wielokąty

Wielokąt reprezentuje obszar ograniczony zamkniętą ścieżką (lub pętlą), która jest zdefiniowana przez serię współrzędnych. Obiekty Polygon są podobne do obiektów Polyline w tym, że składają się z serii współrzędnych w uporządkowanej sekwencji. Wielokąty są rysowane z obrysem i wypełnieniem. Możesz zdefiniować niestandardowe kolory, grubość i przezroczystość boków wielokąta (kreski) oraz niestandardowe kolory i przezroczystość objętego nim obszaru (wypełnienie). Kolory powinny być podane w szesnastkowym formacie HTML. Nazwy kolorów nie są obsługiwane.

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

  • Wiele nieprzylegających do siebie obszarów zdefiniowanych przez jeden wielokąt.
  • obszary z otworami,
  • Przecięcia co najmniej 1 obszaru.

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

Uwaga: warstwa danych zapewnia prosty sposób rysowania wielokątów. Automatycznie określa kierunek zwijania wielokątów, co ułatwia rysowanie wielokątów z otworami. Zapoznaj się z dokumentacją dotyczącą warstwy danych.

Dodaj wielokąt

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

W przypadku prostych wielokątów składających się tylko z 1 ścieżki możesz utworzyć obiekt Polygon za pomocą pojedynczej tablicy współrzędnych LatLng. Interfejs Maps JavaScript API przekształci prostą tablicę w tablicę tablic podczas tworzenia obiektu, gdy będzie ją przechowywać we właściwości paths. Interfejs API udostępnia prostą metodę getPath() dla wielokątów składających się z jednej ścieżki.

Właściwość editable wielokąta określa, czy użytkownicy mogą edytować kształt. Patrz sekcja Kształty, które można edytować poniżej. Podobnie możesz ustawić właściwość draggable, aby zezwolić użytkownikom na 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

Automatyczne uzupełnianie wielokątów

Polygon w przykładzie powyżej składa się z 4 zbiorów współrzędnych LatLng, ale zauważ, że pierwszy i ostatni zbiór określają tę samą lokalizację, co zamyka pętlę. W praktyce jednak, ponieważ wielokąty definiują zamknięte obszary, nie musisz podawać ostatniego zestawu współrzędnych. Interfejs Maps JavaScript API automatycznie uzupełni wielokąt, rysując linię łączącą ostatnią lokalizację z pierwszą w przypadku dowolnej ścieżki.

Poniższy przykład jest identyczny z poprzednim, z tą różnicą, że pominięto ostatni element LatLng: zobacz przykład.

Usuwanie wielokąta

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

bermudaTriangle.setMap(null);

Pamiętaj, że powyższa metoda nie powoduje usunięcia wielokąta. Spowoduje to usunięcie wielokąta 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 serię współrzędnych jako tablicę tablic, gdzie każda tablica jest typu MVCArray. Każda tablica „liści” to tablica LatLng współrzędnych określających jedną ścieżkę. Aby pobrać te współrzędne, wywołaj metodę getPaths() obiektu Polygon. Ponieważ tablica jest MVCArray, musisz ją zmodyfikować i sprawdzić za pomocą tych operacji:

  • getAt() zwraca LatLng przy danym indeksie liczonym od zera.
  • insertAt() wstawia przekazany element LatLng w miejscu o podanym indeksie liczonym od zera. Pamiętaj, że wszystkie istniejące współrzędne o tej wartości indeksu zostaną przesunięte do przodu.
  • removeAt() usuwa LatLng z określonego indeksu (liczonego od zera).

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

Wstawianie otworu w wielokącie

Aby utworzyć pusty obszar w wielokącie, musisz utworzyć 2 ścieżki, jedną wewnątrz drugiej. Aby utworzyć otwór, współrzędne definiujące ścieżkę wewnętrzną muszą być podane w kolejności odwrotnej do współrzędnych definiujących ścieżkę zewnętrzną. Jeśli na przykład współrzędne ścieżki zewnętrznej są podane w kolejności zgodnej z ruchem wskazówek zegara, ścieżka wewnętrzna musi być podana w kolejności przeciwnej 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. Zapoznaj się z dokumentacją dotyczącą warstwy danych.

Poniższy przykład rysuje wielokąt z 2 ścieżkami, przy czym ścieżka wewnętrzna jest zwinięta 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;
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

Prostokąty

Oprócz ogólnej klasy Polygon interfejs Google Maps JavaScript API zawiera specjalną klasę 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 powinny być podane w formacie szesnastkowym HTML.

W przeciwieństwie do parametru Polygon nie definiujesz parametru paths dla parametru Rectangle. Zamiast tego prostokąt ma właściwość bounds, która określa jego kształt przez podanie google.maps.LatLngBounds dla prostokąta.

Właściwość editable prostokąta określa, czy użytkownicy mogą edytować kształt. Więcej informacji znajdziesz w sekcji Kształty, które można edytować poniżej. Podobnie możesz ustawić właściwość draggable, aby zezwolić użytkownikom na 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

Poniższy kod tworzy prostokąt za każdym razem, gdy użytkownik zmieni poziom powiększenia 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

Usuwanie prostokąta

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

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 chcesz usunąć prostokąt, usuń go z mapy, a następnie ustaw wartość null.

Kręgi

Oprócz ogólnej klasy Polygon interfejs Google Maps JavaScript API zawiera specjalną klasę obiektów Circle, która ułatwia ich tworzenie.

Dodawanie kręgu

Circle jest podobny do Polygon, ponieważ możesz zdefiniować niestandardowe kolory, grubość i przezroczystość krawędzi okręgu (kreski) oraz niestandardowe kolory i przezroczystość obszaru wewnątrz okręgu (wypełnienia). Kolory powinny być podane w formacie szesnastkowym HTML.

W przeciwieństwie do parametru Polygon nie definiujesz parametru paths dla parametru Circle. 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ń okręgu w metrach.

Właściwość editable okręgu określa, czy użytkownicy mogą edytować kształt. Patrz sekcja Kształty, które można edytować poniżej. Podobnie możesz ustawić właściwość draggable, aby zezwolić użytkownikom na przeciąganie okręgu.

W tym przykładzie użyto okręgów, aby pokazać przybliżony czas przejścia pieszo między lokalizacjami w japońskim mieście Kioto. Wybierz z menu potrzebną odległość, kliknij mapę, aby ponownie wyśrodkować okrąg, a następnie przeciągnij go, aby zmienić jego położenie.

TypeScript

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
let innerMap;

async function initMap() {
    // Import the needed libraries.
    // Request needed libraries.
    (await google.maps.importLibrary('maps')) as google.maps.MapsLibrary;
    (await google.maps.importLibrary('marker')) as google.maps.MarkerLibrary;
    // Get the gmp-map element.
    const mapElement = document.querySelector(
        'gmp-map'
    ) as google.maps.MapElement;

    const initialCenter = { lat: 34.98956821576194, lng: 135.74239981260283 }; // Hotel Emion, Kyoto, Japan

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

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

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

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

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

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

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

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

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

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

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

initMap();
index.ts

JavaScript

const mapElement = document.querySelector('gmp-map');
let innerMap;
async function initMap() {
    // Import the needed libraries.
    // Request needed libraries.
    (await google.maps.importLibrary('maps'));
    (await google.maps.importLibrary('marker'));
    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map');
    const initialCenter = { lat: 34.98956821576194, lng: 135.74239981260283 }; // Hotel Emion, Kyoto, Japan
    // Get the inner map.
    const innerMap = mapElement.innerMap;
    const buttons = document.querySelectorAll('input[name="radius"]');
    const walkingCircle = new google.maps.Circle({
        strokeColor: '#ffdd00ff',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#ffdd00ff',
        fillOpacity: 0.35,
        map: innerMap,
        center: initialCenter,
        radius: 400,
        draggable: true,
        editable: false,
    });
    // Define a "Crosshair" vector icon
    const parser = new DOMParser();
    const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-6 -6 12 12"><path d="M -6,0 L 6,0 M 0,-6 L 0,6" stroke="black" stroke-width="1"/></svg>`;
    const pinSvg = parser.parseFromString(svgString, 'image/svg+xml').documentElement;
    const centerMarker = new google.maps.marker.AdvancedMarkerElement({
        position: initialCenter,
        title: 'A marker using a custom SVG image.',
        //@ts-ignore
        anchorLeft: '-50%',
        anchorTop: '-50%',
    });
    centerMarker.append(pinSvg);
    mapElement.append(centerMarker);
    // Wait for the map to finish drawing its tiles.
    google.maps.event.addListenerOnce(innerMap, 'tilesloaded', function () {
        // Get the controls div
        const controls = document.getElementById('control-panel');
        // Display controls once map is loaded.
        if (controls) {
            controls.style.display = 'block';
        }
    });
    // Add event listener to update the radius based on user selection.
    buttons.forEach((button) => {
        button.addEventListener('change', (event) => {
            const target = event.target;
            walkingCircle.setRadius(Number(target.value));
        });
    });
    // Handle user click, reset the map center and position the circle.
    innerMap.addListener('click', (mapsMouseEvent) => {
        const newCenter = mapsMouseEvent.latLng;
        walkingCircle.setCenter(newCenter);
        centerMarker.position = newCenter;
        innerMap.panTo(newCenter);
    });
    // Handle user dragging the circle, update the center marker position.
    walkingCircle.addListener('center_changed', () => {
        centerMarker.position = walkingCircle.getCenter();
    });
}
initMap();
index.js

CSS

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

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

HTML

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

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

Wypróbuj

Usuwanie kręgu

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

circle.setMap(null);

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

Kształty, które użytkownik może edytować i przesuwać

Gdy kształt jest edytowalny, pojawiają się na nim uchwyty, za pomocą których można zmieniać jego położenie, kształt i rozmiar bezpośrednio na mapie. Możesz też sprawić, że kształt będzie można przeciągać, aby użytkownicy mogli go przenieść w inne miejsce na mapie.

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

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

Każdy kształt (polilinie, wielokąty, okręgi i prostokąty) można ustawić jako edytowalny przez użytkownika, ustawiając w opcjach kształtu wartość editable na true.

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

Umożliwianie przeciągania kształtu

Domyślnie kształt narysowany na mapie będzie miał stałą pozycję. Aby zezwolić użytkownikom na 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
});

Jeśli włączasz przeciąganie wielokąta lub linii łamanej, warto też rozważyć ustawienie ich jako geodezyjnych, ustawiając właściwość geodesic na true.

Wielokąt geodezyjny zachowuje swój prawdziwy kształt geograficzny podczas przesuwania, co powoduje, że w projekcji Mercatora wydaje się zniekształcony podczas przesuwania na północ lub południe. Wielokąty niegeodezyjne zawsze zachowują swój początkowy wygląd na ekranie.

W przypadku polilinii geodezyjnej segmenty polilinii są rysowane jako najkrótsza droga między dwoma punktami na powierzchni Ziemi, przy założeniu, że Ziemia jest kulą, a nie liniami prostymi na rzucie Mercatora.

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

Na poniższej mapie widać 2 trójkąty o mniej więcej tym samym rozmiarze i wymiarach. Czerwony trójkąt ma właściwość geodesic ustawioną na true. Zwróć uwagę, jak zmienia się jego kształt, gdy przesuwa się na północ.

Zobacz przykład

Nasłuchiwanie zdarzeń edycji

Gdy kształt zostanie zmodyfikowany, po zakończeniu edycji zostanie wywołane zdarzenie. Poniżej znajdziesz listę tych zdarzeń.

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

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

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

Zobacz przykład obsługi zdarzenia edycji na prostokącie: zobacz przykład

Nasłuchiwanie zdarzeń przeciągania

Gdy kształt jest przeciągany, zdarzenia są wywoływane na początku i na końcu przeciągania, a także w jego trakcie. W przypadku polilinii, wielokątów, okręgów i prostokątów wywoływane są te zdarzenia:

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 dotyczącej zdarzeń.