Do mapy możesz dodawać różne kształty. Kształt to obiekt na mapie powiązany ze współrzędną szerokości i długości geograficznej. Dostępne są te kształty: linie, wielokąty, okręgi i prostokąty. Możesz też skonfigurować kształty tak, aby użytkownicy mogli je edytować i przeciągać.
Linie łamane
Aby narysować linię na mapie, użyj linii łamanej. Klasa
Polyline
definiuje nakładkę liniową połączonych segmentów linii na mapie. Obiekt Polyline
składa się z tablicy lokalizacji LatLng
i tworzy serię segmentów liniowych, które łączą te lokalizacje w uporządkowanej kolejności.
Dodawanie linii łamanej
Konstruktor Polyline
wykorzystuje zestaw PolylineOptions
, który określa współrzędne LatLng
linii oraz zestaw stylów do dostosowania wizualnego zachowania linii łamanej.
Obiekty Polyline
są rysowane na mapie jako serie prostych odcinków. Podczas tworzenia linii możesz określić niestandardowe kolory, grubość i przezroczystość kreski linii w obrębie PolylineOptions
lub możesz je zmienić po jej utworzeniu.
Linia łamana obsługuje następujące style linii:
strokeColor
określa szesnastkowy kod koloru HTML w formacie"#FFFFFF"
. KlasaPolyline
nie obsługuje nazwanych kolorów.strokeOpacity
określa wartość liczbową z zakresu od0.0
do1.0
określającą przezroczystość koloru linii. Wartość domyślna to1.0
.strokeWeight
określa szerokość linii w pikselach.
Właściwość editable
linii łamanej określa, czy użytkownicy mogą edytować kształt. Zobacz kształty możliwe do edytowania przez użytkowników poniżej. Możesz też skonfigurować właściwość draggable
tak, aby umożliwiała użytkownikom przeciąganie linii.
TypeScript
// This example creates a 2-pixel-wide red polyline showing the path of // the first trans-Pacific flight between Oakland, CA, and Brisbane, // Australia which was made by Charles Kingsford Smith. function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 3, center: { lat: 0, lng: -180 }, mapTypeId: "terrain", } ); const flightPlanCoordinates = [ { lat: 37.772, lng: -122.214 }, { lat: 21.291, lng: -157.821 }, { lat: -18.142, lng: 178.431 }, { lat: -27.467, lng: 153.027 }, ]; const flightPath = new google.maps.Polyline({ path: flightPlanCoordinates, geodesic: true, strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 2, }); flightPath.setMap(map); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// This example creates a 2-pixel-wide red polyline showing the path of // the first trans-Pacific flight between Oakland, CA, and Brisbane, // Australia which was made by Charles Kingsford Smith. function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 3, center: { lat: 0, lng: -180 }, mapTypeId: "terrain", }); const flightPlanCoordinates = [ { lat: 37.772, lng: -122.214 }, { lat: 21.291, lng: -157.821 }, { lat: -18.142, lng: 178.431 }, { lat: -27.467, lng: 153.027 }, ]; const flightPath = new google.maps.Polyline({ path: flightPlanCoordinates, geodesic: true, strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 2, }); flightPath.setMap(map); } window.initMap = initMap;
Zobacz próbkę
Usuwanie linii łamanej
Aby usunąć linię łamaną z mapy, wywołaj metodę setMap()
z argumentem null
. W tym przykładzie flightPath
jest obiektem linii łamanej:
flightPath.setMap(null);
Pamiętaj, że powyższa metoda nie powoduje usunięcia linii łamanej. Usuwa linię łamaną z mapy. Jeśli zamiast tego chcesz usunąć linię łamaną, usuń ją z mapy, a następnie ustaw linię łamaną na null
.
Sprawdzanie linii łamanej
Linia łamana określa serię współrzędnych w postaci tablicy obiektów LatLng
. Te współrzędne określają ścieżkę linii.
Aby pobrać współrzędne, wywołaj getPath()
, który zwróci tablicę typu MVCArray
. Możesz manipulować i sprawdzać tablicę za pomocą tych operacji:
getAt()
zwraca wartośćLatLng
dla danej wartości indeksu liczonej od zera.insertAt()
wstawia przekazywaną wartośćLatLng
dla podanej wartości indeksu liczonej od zera. Zauważ, że wszystkie istniejące współrzędne przy tej wartości indeksu są przesuwane do przodu.- Funkcja
removeAt()
usuwa wartośćLatLng
przy danej wartości indeksu liczonej od zera.
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;
JavaScript
// This example creates an interactive map which constructs a polyline based on // user clicks. Note that the polyline only appears once its path property // contains two LatLng coordinates. let poly; let map; function initMap() { map = new google.maps.Map(document.getElementById("map"), { zoom: 7, center: { lat: 41.879, lng: -87.624 }, // Center the map on Chicago, USA. }); poly = new google.maps.Polyline({ strokeColor: "#000000", strokeOpacity: 1.0, strokeWeight: 3, }); poly.setMap(map); // Add a listener for the click event map.addListener("click", addLatLng); } // Handles click events on a map, and adds a new point to the Polyline. function addLatLng(event) { const path = poly.getPath(); // Because path is an MVCArray, we can simply append a new coordinate // and it will automatically appear. path.push(event.latLng); // Add a new marker at the new plotted point on the polyline. new google.maps.Marker({ position: event.latLng, title: "#" + path.getLength(), map: map, }); } window.initMap = initMap;
Zobacz 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.
Informacje na temat arrows, linii przerywanych, symboli niestandardowych i animowanych znajdziesz w sekcji Symbole.
Wielokąty
Wielokąt reprezentuje obszar otoczony zamkniętą ścieżką (pętlą), który jest definiowany przez serię współrzędnych.
Obiekty
Polygon
są podobne do obiektów Polyline
, ponieważ składają się z serii współrzędnych w uporządkowanej kolejności.
Wielokąty są rysowane kreską i wypełnieniem. Możesz zdefiniować niestandardowe kolory, grubość i przezroczystość krawędzi wielokąta (kreski) oraz niestandardowe kolory i przezroczystość zamkniętego obszaru (wypełnienia). Kolory należy podawać w formacie szesnastkowym HTML. Nazwy kolorów nie są obsługiwane.
Obiekty Polygon
mogą opisywać złożone kształty, w tym:
- Kilka niesąsiadujących ze sobą obszarów zdefiniowanych jednym wielokątem.
- Obszary z dziurami.
- Skrzyżowania jednego lub większej liczby obszarów.
Aby zdefiniować złożony kształt, użyj wielokąta z wieloma ścieżkami.
Uwaga: warstwa danych umożliwia proste rysowanie wielokątów. Obsługuje zawijanie wielokątów, co ułatwia rysowanie wielokątów z otworami. Zapoznaj się z dokumentacją warstwy danych.
Dodaj wielokąt
Obszar wielokątny może zawierać kilka osobnych ścieżek, dlatego właściwość paths
obiektu Polygon
określa tablicę tablic, z których każda jest typu MVCArray
. Każda tablica określa oddzielną sekwencję uporządkowanych współrzędnych LatLng
.
W przypadku prostych wielokątów zawierających tylko jedną ścieżkę możesz utworzyć obiekt Polygon
, używając jednej tablicy współrzędnych LatLng
. Interfejs Maps JavaScript API przekonwertuje prostą tablicę na tablicę podczas budowania, zapisując ją we właściwości paths
. W przypadku wielokątów składających się z 1 ścieżki interfejs API udostępnia prostą metodę getPath()
.
Właściwość editable
wielokąta określa, czy użytkownicy mogą edytować kształt. Zobacz kształty możliwe do edytowania przez użytkowników poniżej.
W podobny sposób można skonfigurować właściwość draggable
tak, aby umożliwiała użytkownikom przeciąganie kształtu.
TypeScript
// This example creates a simple polygon representing the Bermuda Triangle. function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 5, center: { lat: 24.886, lng: -70.268 }, mapTypeId: "terrain", } ); // Define the LatLng coordinates for the polygon's path. const triangleCoords = [ { lat: 25.774, lng: -80.19 }, { lat: 18.466, lng: -66.118 }, { lat: 32.321, lng: -64.757 }, { lat: 25.774, lng: -80.19 }, ]; // Construct the polygon. const bermudaTriangle = new google.maps.Polygon({ paths: triangleCoords, strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35, }); bermudaTriangle.setMap(map); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// This example creates a simple polygon representing the Bermuda Triangle. function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 5, center: { lat: 24.886, lng: -70.268 }, mapTypeId: "terrain", }); // Define the LatLng coordinates for the polygon's path. const triangleCoords = [ { lat: 25.774, lng: -80.19 }, { lat: 18.466, lng: -66.118 }, { lat: 32.321, lng: -64.757 }, { lat: 25.774, lng: -80.19 }, ]; // Construct the polygon. const bermudaTriangle = new google.maps.Polygon({ paths: triangleCoords, strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35, }); bermudaTriangle.setMap(map); } window.initMap = initMap;
Zobacz próbkę
Autouzupełnianie wielokątów
Polygon
w przykładzie powyżej składa się z 4 zestawów współrzędnych LatLng
, ale pamiętaj, że pierwszy i ostatni zestaw określają tę samą lokalizację, która kończy pętlę. W praktyce nie musisz jednak określać ostatniego zestawu współrzędnych, ponieważ wielokąty wyznaczają zamknięte obszary. Interfejs Maps JavaScript API automatycznie uzupełni wielokąt, rysując kreskę łączącą ostatnią lokalizację z pierwszym miejscem dla danej ścieżki.
Poniższy przykład jest taki sam jak poprzedni, z tą różnicą, że pominięto ostatni LatLng
: view example (zobacz przykład).
Usuwanie wielokąta
Aby usunąć wielokąt z mapy, wywołaj metodę setMap()
z argumentem null
. W tym przykładzie bermudaTriangle
jest obiektem wielokąta:
bermudaTriangle.setMap(null);
Zwróć uwagę, że powyższa metoda nie powoduje usunięcia wielokąta. Spowoduje to usunięcie wielokąta z mapy. Jeśli zamiast tego chcesz usunąć wielokąt, usuń go z mapy, a potem ustaw wartość null
jako wielokąta.
Sprawdzanie wielokąta
Wielokąt określa serię współrzędnych w postaci tablicy tablic, z których każda jest typu MVCArray
. Każda tablica „leaf” zawiera tablicę współrzędnych LatLng
, która określa jedną ścieżkę. Aby pobrać te współrzędne, wywołaj metodę getPaths()
obiektu Polygon
. Ponieważ tablica to MVCArray
, konieczne będzie manipulowanie i sprawdzenie jej za pomocą tych operacji:
getAt()
zwraca wartośćLatLng
dla danej wartości indeksu liczonej od zera.insertAt()
wstawia przekazywaną wartośćLatLng
dla podanej wartości indeksu liczonej od zera. Zauważ, że wszystkie istniejące współrzędne przy tej wartości indeksu są przesuwane do przodu.- Funkcja
removeAt()
usuwa wartośćLatLng
przy danej wartości indeksu liczonej od zera.
TypeScript
// This example creates a simple polygon representing the Bermuda Triangle. // When the user clicks on the polygon an info window opens, showing // information about the polygon's coordinates. let map: google.maps.Map; let infoWindow: google.maps.InfoWindow; function initMap(): void { map = new google.maps.Map(document.getElementById("map") as HTMLElement, { zoom: 5, center: { lat: 24.886, lng: -70.268 }, mapTypeId: "terrain", }); // Define the LatLng coordinates for the polygon. const triangleCoords: google.maps.LatLngLiteral[] = [ { lat: 25.774, lng: -80.19 }, { lat: 18.466, lng: -66.118 }, { lat: 32.321, lng: -64.757 }, ]; // Construct the polygon. const bermudaTriangle = new google.maps.Polygon({ paths: triangleCoords, strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 3, fillColor: "#FF0000", fillOpacity: 0.35, }); bermudaTriangle.setMap(map); // Add a listener for the click event. bermudaTriangle.addListener("click", showArrays); infoWindow = new google.maps.InfoWindow(); } function showArrays(event: any) { // Since this polygon has only one path, we can call getPath() to return the // MVCArray of LatLngs. // @ts-ignore const polygon = this as google.maps.Polygon; const vertices = polygon.getPath(); let contentString = "<b>Bermuda Triangle polygon</b><br>" + "Clicked location: <br>" + event.latLng.lat() + "," + event.latLng.lng() + "<br>"; // Iterate over the vertices. for (let i = 0; i < vertices.getLength(); i++) { const xy = vertices.getAt(i); contentString += "<br>" + "Coordinate " + i + ":<br>" + xy.lat() + "," + xy.lng(); } // Replace the info window's content and position. infoWindow.setContent(contentString); infoWindow.setPosition(event.latLng); infoWindow.open(map); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// This example creates a simple polygon representing the Bermuda Triangle. // When the user clicks on the polygon an info window opens, showing // information about the polygon's coordinates. let map; let infoWindow; function initMap() { map = new google.maps.Map(document.getElementById("map"), { zoom: 5, center: { lat: 24.886, lng: -70.268 }, mapTypeId: "terrain", }); // Define the LatLng coordinates for the polygon. const triangleCoords = [ { lat: 25.774, lng: -80.19 }, { lat: 18.466, lng: -66.118 }, { lat: 32.321, lng: -64.757 }, ]; // Construct the polygon. const bermudaTriangle = new google.maps.Polygon({ paths: triangleCoords, strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 3, fillColor: "#FF0000", fillOpacity: 0.35, }); bermudaTriangle.setMap(map); // Add a listener for the click event. bermudaTriangle.addListener("click", showArrays); infoWindow = new google.maps.InfoWindow(); } function showArrays(event) { // Since this polygon has only one path, we can call getPath() to return the // MVCArray of LatLngs. // @ts-ignore const polygon = this; const vertices = polygon.getPath(); let contentString = "<b>Bermuda Triangle polygon</b><br>" + "Clicked location: <br>" + event.latLng.lat() + "," + event.latLng.lng() + "<br>"; // Iterate over the vertices. for (let i = 0; i < vertices.getLength(); i++) { const xy = vertices.getAt(i); contentString += "<br>" + "Coordinate " + i + ":<br>" + xy.lat() + "," + xy.lng(); } // Replace the info window's content and position. infoWindow.setContent(contentString); infoWindow.setPosition(event.latLng); infoWindow.open(map); } window.initMap = initMap;
Zobacz próbkę
Wgłębienie dziury w wielokątie
Aby utworzyć pusty obszar w wielokątie, musisz utworzyć 2 ścieżki, jedna wewnątrz drugiej. Aby utworzyć otwór, współrzędne określające ścieżkę wewnętrzną muszą znajdować się w odwrotnej kolejności do tej, która określa ścieżkę zewnętrzną. Jeśli na przykład współrzędne ścieżki zewnętrznej są określone w kierunku zgodnym z ruchem wskazówek zegara, ścieżka wewnętrzna musi być skierowana w lewo.
Uwaga: warstwa danych obsługuje za Ciebie kolejność ścieżek wewnętrznych i zewnętrznych, co ułatwia rysowanie wielokątów z otworami. Zapoznaj się z dokumentacją warstwy danych.
W poniższym przykładzie rysuje się wielokąt z 2 ścieżkami, przy czym ścieżka wewnętrzna jest zakreślona w kierunku przeciwnym do ścieżki zewnętrznej.
TypeScript
// This example creates a triangular polygon with a hole in it. function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 5, center: { lat: 24.886, lng: -70.268 }, } ); // Define the LatLng coordinates for the polygon's outer path. const outerCoords = [ { lat: 25.774, lng: -80.19 }, { lat: 18.466, lng: -66.118 }, { lat: 32.321, lng: -64.757 }, ]; // Define the LatLng coordinates for the polygon's inner path. // Note that the points forming the inner path are wound in the // opposite direction to those in the outer path, to form the hole. const innerCoords = [ { lat: 28.745, lng: -70.579 }, { lat: 29.57, lng: -67.514 }, { lat: 27.339, lng: -66.668 }, ]; // Construct the polygon, including both paths. const bermudaTriangle = new google.maps.Polygon({ paths: [outerCoords, innerCoords], strokeColor: "#FFC107", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FFC107", fillOpacity: 0.35, }); bermudaTriangle.setMap(map); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// This example creates a triangular polygon with a hole in it. function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 5, center: { lat: 24.886, lng: -70.268 }, }); // Define the LatLng coordinates for the polygon's outer path. const outerCoords = [ { lat: 25.774, lng: -80.19 }, { lat: 18.466, lng: -66.118 }, { lat: 32.321, lng: -64.757 }, ]; // Define the LatLng coordinates for the polygon's inner path. // Note that the points forming the inner path are wound in the // opposite direction to those in the outer path, to form the hole. const innerCoords = [ { lat: 28.745, lng: -70.579 }, { lat: 29.57, lng: -67.514 }, { lat: 27.339, lng: -66.668 }, ]; // Construct the polygon, including both paths. const bermudaTriangle = new google.maps.Polygon({ paths: [outerCoords, innerCoords], strokeColor: "#FFC107", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FFC107", fillOpacity: 0.35, }); bermudaTriangle.setMap(map); } window.initMap = initMap;
Zobacz próbkę
Prostokąty
Oprócz ogólnej klasy Polygon
interfejs JavaScript API Map Google zawiera konkretną klasę obiektów
Rectangle
, aby ułatwić ich tworzenie.
Dodaj prostokąt
Rectangle
jest podobny do Polygon
, ponieważ możesz definiować niestandardowe kolory, grubość i przezroczystość krawędzi prostokąta (kreskę) oraz niestandardowe kolory i przezroczystość obszaru wewnątrz prostokąta (wypełnienie). Kolory należy podawać za pomocą szesnastkowego stylu liczbowego HTML.
W przeciwieństwie do właściwości Polygon
nie musisz zdefiniować właściwości paths
dla elementu Rectangle
. Prostokąt ma właściwość bounds
, która określa jego kształt, podając dla niego właściwość
google.maps.LatLngBounds
.
Właściwość editable
prostokąta określa, czy użytkownicy mogą edytować kształt. Zobacz kształty możliwe do edytowania przez użytkowników poniżej. Możesz też skonfigurować właściwość draggable
tak, aby umożliwiała użytkownikom przeciąganie prostokąta.
TypeScript
// This example adds a red rectangle to a map. function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 11, center: { lat: 33.678, lng: -116.243 }, mapTypeId: "terrain", } ); const rectangle = new google.maps.Rectangle({ strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35, map, bounds: { north: 33.685, south: 33.671, east: -116.234, west: -116.251, }, }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// This example adds a red rectangle to a map. function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 11, center: { lat: 33.678, lng: -116.243 }, mapTypeId: "terrain", }); const rectangle = new google.maps.Rectangle({ strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35, map, bounds: { north: 33.685, south: 33.671, east: -116.234, west: -116.251, }, }); } window.initMap = initMap;
Zobacz próbkę
Ten kod tworzy prostokąt za każdym razem, gdy użytkownik zmieni powiększenie mapy. 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;
JavaScript
// This example creates a rectangle based on the viewport // on any 'zoom-changed' event. function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 11, center: { lat: 40.74852, lng: -73.981687 }, mapTypeId: "terrain", }); const rectangle = new google.maps.Rectangle(); map.addListener("zoom_changed", () => { // Get the current bounds, which reflect the bounds before the zoom. rectangle.setOptions({ strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35, map, bounds: map.getBounds(), }); }); } window.initMap = initMap;
Zobacz próbkę
Usuwanie prostokąta
Aby usunąć prostokąt z mapy, wywołaj metodę setMap()
z argumentem null
.
rectangle.setMap(null);
Pamiętaj, że powyższa metoda nie powoduje usunięcia prostokąta. Spowoduje to usunięcie prostokąta z mapy. Jeśli zamiast tego chcesz usunąć prostokąt, usuń go z mapy, a następnie ustaw wartość null
dla samego prostokąta.
Kółka
Oprócz ogólnej klasy Polygon
interfejs JavaScript API Map Google zawiera konkretną klasę obiektów
Circle
, aby ułatwić ich tworzenie.
Dodaj krąg
Element Circle
jest podobny do Polygon
, ponieważ możesz zdefiniować niestandardowe kolory, grubość i przezroczystość krawędzi okręgu (kreskę) oraz niestandardowe kolory i przezroczystość obszaru w okręgu (wypełnienie). Kolory powinny być określone za pomocą szesnastkowego liczbowego stylu HTML.
W przeciwieństwie do właściwości Polygon
nie musisz zdefiniować właściwości paths
dla elementu Circle
. Zamiast tego okrąg ma 2 dodatkowe właściwości określające jego kształt:
center
określagoogle.maps.LatLng
środka okręgu.radius
określa promień okręgu w metrach.
Właściwość editable
okręgu określa, czy użytkownicy mogą edytować kształt. Zobacz kształty możliwe do edytowania przez użytkowników poniżej.
Możesz też skonfigurować właściwość draggable
tak, aby umożliwiała użytkownikom przeciąganie okręgu.
TypeScript
// This example creates circles on the map, representing populations in North // America. // First, create an object containing LatLng and population for each city. interface City { center: google.maps.LatLngLiteral; population: number; } const citymap: Record<string, City> = { chicago: { center: { lat: 41.878, lng: -87.629 }, population: 2714856, }, newyork: { center: { lat: 40.714, lng: -74.005 }, population: 8405837, }, losangeles: { center: { lat: 34.052, lng: -118.243 }, population: 3857799, }, vancouver: { center: { lat: 49.25, lng: -123.1 }, population: 603502, }, }; function initMap(): void { // Create the map. const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 4, center: { lat: 37.09, lng: -95.712 }, mapTypeId: "terrain", } ); // Construct the circle for each value in citymap. // Note: We scale the area of the circle based on the population. for (const city in citymap) { // Add the circle for this city to the map. const cityCircle = new google.maps.Circle({ strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35, map, center: citymap[city].center, radius: Math.sqrt(citymap[city].population) * 100, }); } } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
const citymap = { chicago: { center: { lat: 41.878, lng: -87.629 }, population: 2714856, }, newyork: { center: { lat: 40.714, lng: -74.005 }, population: 8405837, }, losangeles: { center: { lat: 34.052, lng: -118.243 }, population: 3857799, }, vancouver: { center: { lat: 49.25, lng: -123.1 }, population: 603502, }, }; function initMap() { // Create the map. const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: { lat: 37.09, lng: -95.712 }, mapTypeId: "terrain", }); // Construct the circle for each value in citymap. // Note: We scale the area of the circle based on the population. for (const city in citymap) { // Add the circle for this city to the map. const cityCircle = new google.maps.Circle({ strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35, map, center: citymap[city].center, radius: Math.sqrt(citymap[city].population) * 100, }); } } window.initMap = initMap;
Zobacz próbkę
Usuwanie kręgu
Aby usunąć okrąg z mapy, wywołaj metodę setMap()
z argumentem null
.
circle.setMap(null);
Pamiętaj, że powyższa metoda nie powoduje usunięcia okręgu. Spowoduje to usunięcie okręgu z mapy. Jeśli zamiast tego chcesz usunąć okrąg, usuń go z mapy, a następnie ustaw wartość null
dla jego okręgu.
Edytowalne kształty z możliwością przeciągania przez użytkownika
Możliwość edytowania kształtu powoduje dodanie do niego uchwytów, za pomocą których można zmieniać położenie i kształt kształtu oraz jego rozmiar bezpośrednio na mapie. Możesz też przeciągać kształt, aby użytkownicy mogli go przenosić w inne miejsce na mapie.
Zmiany obiektu wprowadzone przez użytkownika nie są zachowywane między sesjami. Jeśli chcesz zapisać zmiany wprowadzone przez użytkownika, musisz samodzielnie zarejestrować i przechowywać informacje.
Udostępnianie kształtu
Użytkownik może edytować dowolny kształt (linie łamane, wielokąty, okręgi i prostokąty), ustawiając editable
na true
w opcjach kształtu.
var bounds = { north: 44.599, south: 44.490, east: -78.443, west: -78.649 }; // Define a rectangle and set its editable property to true. var rectangle = new google.maps.Rectangle({ bounds: bounds, editable: true });
Możliwość przeciągania kształtu
Domyślnie kształt narysowany na mapie jest ustalany na stałe w danym miejscu. Aby umożliwić użytkownikom przeciąganie kształtu w inne miejsce na mapie, w opcjach kształtu ustaw draggable
na true
.
var redCoords = [ {lat: 25.774, lng: -80.190}, {lat: 18.466, lng: -66.118}, {lat: 32.321, lng: -64.757} ]; // Construct a draggable red triangle with geodesic set to true. new google.maps.Polygon({ map: map, paths: redCoords, strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', fillOpacity: 0.35, draggable: true, geodesic: true });
W przypadku włączania przeciągania wielokąta lub linii łamanej warto też ustawić wielokąt lub linię łamaną jako obszar geodezyjny, ustawiając jego właściwość geodesic
na true
.
Wielokąt geodezyjny zachowuje swój rzeczywisty kształt geograficzny po przeniesieniu, przez co wielokąt jest zniekształcony przy przesuwaniu na północ lub południe w odwzorowaniu Merkatora. Wielokąty niegeodezyjne zawsze zachowują swój początkowy wygląd na ekranie.
W przypadku linii łamanej odcinki linii łamanej są rysowane jako najkrótsza ścieżka między dwoma punktami na powierzchni Ziemi (przy założeniu, że Ziemia jest kulą, a nie liniami prostymi w odwzorowaniu Merkatora).
Więcej informacji na temat układów współrzędnych znajdziesz w przewodniku po mapowaniu i współrzędnych kafelków.
Na poniższej mapie widoczne są 2 trójkąty o mniej więcej jednakowych rozmiarach i wymiarach. Właściwość geodesic
czerwonego trójkąta jest ustawiona na true
. Zwróć uwagę, jak zmienia się jej kształt, gdy przesuwa się na północ.
Odsłuchiwanie zdarzeń dotyczących edytowania
Podczas edycji kształtu wywoływane jest zdarzenie po zakończeniu edycji. Ich listę znajdziesz poniżej.
Kształt | Wydarzenia |
---|---|
Koło |
radius_changed center_changed
|
Wielokąt |
insert_at remove_at set_at
Detektor musi być ustawiony na ścieżce wielokąta. Jeśli wielokąt ma wiele ścieżek, dla każdej z nich musisz ustawić detektor. |
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: zobacz przykład.
Wykrywaj przeciąganie zdarzeń
Przy przeciąganiu kształtu zdarzenia są wywoływane zarówno na początku, jak i na końcu tego przeciągania, a także podczas przeciągania. W przypadku linii łamanych, wielokątów, okręgów i prostokątów wywoływane są poniższe zdarzenia.
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ń.