Kształty i linie

Wybierz platformę: Android iOS JavaScript

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

Linie łamane

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

Dodawanie linii łamanej

Konstruktor Polyline przyjmuje zestaw funkcji PolylineOptions określający LatLng współrzędne linii i zestaw stylów do dostosowania linii łamanej wizualnego zachowania.

Obiekty (Polyline) są rysowane jako serie prostych odcinków mapę. Możesz określić niestandardowe kolory, grubość i przezroczystość kreski. tej linii w obrębie PolylineOptions, gdy do utworzenia linii. Możesz też zmienić te właściwości po zakończeniu budowy. Linia łamana obsługuje następujące style linii:

  • strokeColor określa szesnastkowy kod koloru HTML formatu "#FFFFFF" Klasa Polyline nie obsługuje nazwane kolory.
  • strokeOpacity określa wartość liczbową z zakresu 0.0 i 1.0, aby określić przezroczystość linii koloru. Wartość domyślna to 1.0.
  • strokeWeight określa szerokość linii w pikselach.

Właściwość editable linii łamanej określa, czy użytkownicy mogą i edytuj kształt. Zobacz kształty, które użytkownicy mogą edytować poniżej. Możesz też ustawić właściwość draggable tak, aby zezwalała przeciągnięcie wiersza przez użytkowników.

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

Zobacz próbkę

Usuwanie linii łamanej

Aby usunąć linię łamaną z mapy, wywołaj metodę setMap() podając wartość null jako argument. W poniższym przykładzie flightPath jest obiektem linii łamanej:

flightPath.setMap(null);

Pamiętaj, że powyższa metoda nie powoduje usunięcia linii łamanej. Usuwa linii łamanej na mapie. Jeśli zamiast tego chcesz usunąć linię łamaną, należy usunąć go z mapy, a następnie ustawić do linii łamanej null.

Sprawdzanie linii łamanej

Linia łamana określa serię współrzędnych w postaci tablicy LatLng obiekty. Te współrzędne określają ścieżkę linii. Aby pobrać współrzędne, wywołaj getPath(), który spowoduje zwraca tablicę typu MVCArray. Dostępne opcje operuj i sprawdź tablicę, używając tych operacji:

  • getAt() zwraca wartość LatLng dla danej wartości liczony od zera.
  • insertAt() wstawia zaakceptowaną wartość LatLng dla danej wartości indeksu liczonej od zera. Pamiętaj, że każdy współrzędne są przesuwane do przodu.
  • Funkcja removeAt() usuwa wartość LatLng w danym miejscu liczony od zera.
.

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

Zobacz próbkę

Dostosowywanie linii łamanej

Do linii łamanej możesz dodawać obrazy wektorowe w postaci symboli. Dzięki kombinacji symboli i klasy PolylineOptions, masz dużą kontrolę nad wyglądem i działaniem linii łamanych na mapie. Więcej informacji można znaleźć w sekcji Symbole. o strzałkach, linie przerywane, symboly niestandardowe i animowane symbole.

Wielokąty

Wielokąt reprezentuje obszar otoczony zamkniętą ścieżką (pętlą), która jest zdefiniowanej szeregiem współrzędnych. Obiekty (Polygon) są podobne do obiektów Polyline tym, że składają się z serii współrzędnych w ustalonej kolejności. Wielokąty są rysowane kreską i wypełnieniem. Możesz zdefiniować kolory niestandardowe, wagi i przezroczystości krawędzi wielokąta (kreski) oraz niestandardowe kolorów i przezroczystości zamkniętego obszaru (wypełnienia). Kolory powinny być w formacie szesnastkowym HTML. Nazwy kolorów nie są obsługiwane.

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

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

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

Uwaga: warstwa danych zapewnia prosty sposób wielokątów do rysowania. Obsługuje zawijanie wielokątów, aby rysować wielokąty z otworami. Zobacz dokumentacji warstwa danych.

Dodaj wielokąt

Obszar wielokątny może zawierać kilka osobnych ścieżek, Właściwość paths obiektu Polygon określa tablica tablic, każda typu MVCArray. Każda tablica definiuje oddzielnej sekwencji uporządkowanych współrzędnych LatLng.

W przypadku prostych wielokątów składających się tylko z jednej ścieżki, możesz utwórz Polygon przy użyciu pojedynczej tablicy Współrzędne LatLng. Interfejs Maps JavaScript API dokona konwersji prostej tablicy w trakcie budowania podczas jej przechowywania w usłudze paths. Interfejs API udostępnia prosty Metoda getPath() w przypadku 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. Zobacz kształty możliwe do edytowania przez użytkowników poniżej. Możesz w podobny sposób skonfigurować właściwość draggable tak, aby umożliwiała użytkownikom przeciągnij kształt.

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

Zobacz próbkę

Autouzupełnianie wielokątów

Polygon w powyższym przykładzie składa się z 4 zestawów LatLng, ale zwróć uwagę, że pierwszy i ostatni ustawiają się zdefiniować tę samą lokalizację, co kończy pętlę. W praktyce ponieważ wielokąty definiują zamknięte obszary, nie trzeba określać ostatniego i określania współrzędnych. Interfejs Maps JavaScript API zostanie automatycznie ukończony wielokąt, rysując kreskę łączącą ostatnią lokalizację z pierwszą lokalizację na dowolnej ścieżce.

Poniższy przykład jest identyczny z poprzednim, z tym wyjątkiem że ostatni element LatLng jest pominięty: zobacz przykład.

Usuwanie wielokąta

Aby usunąć wielokąt z mapy, wywołaj metodę setMap() podając wartość null jako argument. W poniższym przykładzie bermudaTriangle to obiekt wielokątny:

bermudaTriangle.setMap(null);

Zwróć uwagę, że powyższa metoda nie powoduje usunięcia wielokąta. Usuwa ten wielokąt na mapie. Jeśli natomiast chcesz usunąć wielokąt, należy usunąć go z mapy, a następnie ustawić na null.

Sprawdzanie wielokąta

Wielokąt określa serię współrzędnych w postaci tablicy tablic, gdzie każda tablica jest typu MVCArray. Każdy „liść” tablica to tablica współrzędnych LatLng i określić jedną ścieżkę. Aby odzyskać te współrzędne, wywołaj funkcję Metoda getPaths() obiektu Polygon. Ponieważ tablica to MVCArray, którą musisz manipulować, i sprawdź ją, używając tych operacji:

  • getAt() zwraca wartość LatLng dla danej wartości liczony od zera.
  • insertAt() wstawia zaakceptowaną wartość LatLng dla danej wartości indeksu liczonej od zera. Pamiętaj, że każdy współrzędne są przesuwane do przodu.
  • Funkcja removeAt() usuwa wartość LatLng w danym miejscu liczony 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

Zobacz próbkę

Wgłębienie dziury w wielokątie

Aby utworzyć pusty obszar w obrębie wielokąta, trzeba utworzyć dwie ścieżki: co znajduje się w drugiej. Aby utworzyć otwór, współrzędne określają muszą znajdować się w kolejności odwrotnej do ścieżki definiującej ścieżkę zewnętrzną. Jeśli na przykład współrzędne ścieżki zewnętrznej są zgodne z ruchem wskazówek zegara wewnętrzna ścieżka musi być skierowana w lewo.

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

W przykładzie poniżej rysujemy wielokąt z 2 ścieżkami – ścieżką wewnętrzną 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

Zobacz próbkę

Prostokąty

Oprócz ogólnej klasy Polygon w Mapach Google JavaScript API zawiera konkretną klasę dla Rectangle, aby uprościć ich tworzenie.

Dodaj prostokąt

Rectangle jest podobny do Polygon w możesz zdefiniować niestandardowe kolory, wagę i przezroczystość krawędzi prostokąta (kreska) oraz niestandardowe kolory i przezroczystość obszaru prostokąta (wypełnienie). Kolory powinny być określone w szesnastkowym formacie HTML stylu.

W przeciwieństwie do właściwości Polygon nie musisz zdefiniować właściwości paths dla: Rectangle. Zamiast tego prostokąta ma bounds która określa kształt przez określenie google.maps.LatLngBounds dla prostokąta.

Właściwość editable prostokąta określa, czy Użytkownicy mogą edytować kształt. Zobacz: edytowalne przez użytkowników kształtów poniżej. W podobny sposób możesz ustawić właściwość draggable aby umożliwić użytkownikom przeciągnięcie 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

Zobacz próbkę

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

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

Zobacz próbkę

Usuwanie prostokąta

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

rectangle.setMap(null);

Pamiętaj, że powyższa metoda nie powoduje usunięcia prostokąta. Usuwa prostokąta na mapie. Jeśli natomiast chcesz usunąć prostokąt, należy usunąć go z mapy, a następnie ustawić na null.

Kręgi

Oprócz ogólnej klasy Polygon w Mapach Google JavaScript API zawiera konkretną klasę dla Circle, aby uprościć ich tworzenie.

Dodaj krąg

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

W przeciwieństwie do właściwości Polygon nie musisz zdefiniować właściwości paths dla: Circle. Krąg zawiera dwie dodatkowe właściwości określające jego kształt:

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

Właściwość editable kręgu określa, czy użytkownicy mogą edytować kształt. Zobacz kształty możliwe do edytowania przez użytkowników poniżej. Możesz też ustawić właściwość draggable tak, aby zezwalała przeciągnięcie kręgu.

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

Zobacz próbkę

Usuwanie kręgu

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

circle.setMap(null);

Pamiętaj, że powyższa metoda nie powoduje usunięcia okręgu. Usuwa okrąg na mapie. Jeśli zamiast tego chcesz usunąć krąg, należy usunąć go z mapy, a następnie ustawić zaznaczy koło siebie, aby dotrzeć do null.

Edytowalne i przeciągane kształty przez użytkownika

Gdy umożliwiasz edytowanie kształtu, dodajemy do niego uchwyty, których użytkownicy mogą używać aby zmienić położenie, kształt i rozmiar kształtu bezpośrednio na mapie. Możesz też umożliwiają przeciąganie kształtu, dzięki czemu można go przenosić w inne miejsce na mapie.

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

Udostępnianie kształtu

Możesz ustawiać dowolny kształt (linie łamane, wielokąty, okręgi i prostokąty) jako edytowalne dla użytkownika, ustawiając editable na true w opcje kształtu.

var bounds = {
  north: 44.599,
  south: 44.490,
  east: -78.443,
  west: -78.649
};

// Define a rectangle and set its editable property to true.
var rectangle = new google.maps.Rectangle({
  bounds: bounds,
  editable: true
});

Zobacz przykład

Możliwość przeciągania kształtu

Domyślnie kształt narysowany na mapie jest ustalany na stałe w danym miejscu. Aby zezwolić przeciąganie kształtu w inne miejsce na mapie, Od draggable do true w opcjach kształtu.

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

Przy włączaniu przeciągania wielokąta lub linii łamanej weź pod uwagę również nadanie wielokąta lub linii łamanej geodezyjnie, ustawiając jego geodesic usłudze na true.

Wielokąt geodezyjny zachowuje swój rzeczywisty kształt geograficzny po przeniesieniu, powodując zniekształcenia wielokąta, gdy przesuwa się on na północ lub południe w Odwzorowanie Merkatora. Wielokąty niegeodezyjne zawsze zachowują swój początkowy element jak wygląda na ekranie.

Na geodezyjnej linii łamanej odcinki linii łamanej są rysowane jako najkrótsza ścieżka między dwoma punktami na powierzchni Ziemi przy założeniu, że Ziemia jest kuli, w odróżnieniu od prostych linii na odwzorowaniu Merkatora.

Więcej informacji o układach współrzędnych znajdziesz w przewodniku mapa i kafelek .

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

Zobacz przykład

Odsłuchiwanie zdarzeń dotyczących edytowania

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

Kształt Wydarzenia
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 zawiera wielu ścieżek, należy ustawić detektor w każdej ścieżce.
Linia łamana insert_at
remove_at
set_at

Detektor musi być ustawiony na ścieżce linii ł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 prostokąta: wyświetl przykład.

Wykrywaj przeciąganie zdarzeń

Przy przeciąganiu kształtu zdarzenia są uruchamiane na początku i na końcu przeciągania jak również podczas przeciągania. Zdarzenia są wywoływane dla linie łamane, wielokąty, okręgi i prostokąty.

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ń.