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ć lub przeciągać.
Linie łamane
Aby narysować linię na mapie, użyj linii łamanej. Klasa
Polyline definiuje liniową nakładkę połączonych segmentów linii na mapie. Obiekt Polyline składa się z tablicy lokalizacji LatLng i tworzy serię segmentów linii łączących te lokalizacje w uporządkowanej kolejności.
Dodaj linię łamaną
Konstruktor Polyline pobiera zbiór PolylineOptions określających współrzędne LatLng linii i zestaw stylów, aby dostosować zachowanie wizualne linii łamanej.
Obiekty Polyline są rysowane jako seria prostych fragmentów na mapie. Możesz określić niestandardowe kolory, grubość i przezroczystość linii w obrębie obiektu PolylineOptions podczas tworzenia linii. Możesz też zmienić te właściwości po utworzeniu linii.
Linia łamana obsługuje następujące style kreski:
strokeColorokreśla szesnastkowy kod koloru HTML w formacie"#FFFFFF". KlasaPolylinenie obsługuje nazwanych kolorów.strokeOpacityokreśla wartość liczbową z zakresu od0.0do1.0, która określa przezroczystość koloru linii. Wartość domyślna to1.0.strokeWeightokreśla szerokość linii w pikselach.
Właściwość editable linii łamanej określa, czy użytkownicy mogą edytować kształt. Zobacz sekcję Kształty dostępne do edycji przez użytkownika poniżej. I podobnie, możesz ustawić właściwość draggable tak, by użytkownicy mogli przeciągać linię.
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;
Wypróbuj fragment
Usuwanie linii łamanej
Aby usunąć z mapy linię łamaną, wywołaj metodę setMap() przekazującą null jako argument. W tym przykładzie flightPath jest obiektem linii łamanej:
flightPath.setMap(null);
Pamiętaj, że powyższa metoda nie usuwa linii łamanej. Usuwa linię łamaną z mapy. Jeśli chcesz usunąć linię łamaną, usuń ją z mapy, a następnie ustaw ją 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 funkcję getPath(), która zwróci tablicę typu MVCArray. Możesz manipulować tablicą i badać ją za pomocą tych operacji:
getAt()zwraca wartośćLatLngprzy danej wartości indeksu liczonej od zera.insertAt()wstawia przekazaną wartośćLatLngdla danej wartości indeksu liczonej od zera. Pamiętaj, że wszystkie istniejące współrzędne w tej wartości indeksu są przenoszone do przodu.- Funkcja
removeAt()usuwa elementLatLngprzy 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;
Wypróbuj fragment
Dostosowywanie linii łamanej
Do linii łamanej można dodawać obrazy wektorowe w postaci symboli. Połączenie symboli i klasy PolylineOptions zapewnia dużą kontrolę nad wyglądem i działaniem linii łamanych na mapie.
W sekcji Symbole znajdziesz informacje na temat arrows, kreskowanych linii, symboli niestandardowych i animowanych symboli.
Wielokąty
Wielokąt oznacza obszar zamknięty przez zamkniętą ścieżkę (lub pętlę) definiowaną 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), a także niestandardowe kolory i przezroczystość zamkniętego obszaru (wypełnienie). Kolory powinny być określone w formacie szesnastkowym HTML. Nazwy kolorów nie są obsługiwane.
Obiekty Polygon mogą opisywać złożone kształty, takie jak:
- Wiele niesąsiadujących ze sobą obszarów zdefiniowanych przez pojedynczy wielokąt.
- Obszary z otworami.
- Skrzyżowania jednego lub wielu 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. Pozwala na zwijanie wielokątów, co ułatwia rysowanie wielokątów z otworami. Więcej informacji znajdziesz w dokumentacji warstwy danych.
Dodaj wielokąt
Jako że obszar wielokąta może obejmować kilka osobnych ścieżek, właściwość paths obiektu Polygon określa tablicę tablic, z których każdy jest typu MVCArray. Każda tablica definiuje osobną sekwencję uporządkowanych współrzędnych LatLng.
W przypadku prostych wielokątów zawierających tylko 1 ścieżkę możesz utworzyć Polygon z użyciem pojedynczej tablicy współrzędnych LatLng. Interfejs Maps JavaScript API podczas konstruowania tablicy prostej zostanie przekonwertowany na tablicę przy zapisywaniu jej we właściwości paths. Interfejs API udostępnia prostą metodę getPath() dla wielokątów złożonych z 1 ścieżki.
Właściwość editable wielokąta określa, czy użytkownicy mogą edytować kształt. Zobacz sekcję Kształty dostępne do edycji przez użytkownika poniżej.
Możesz też ustawić właściwość draggable, która umożliwia 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;
Wypróbuj fragment
Autouzupełnianie wielokątów
Obiekt Polygon w przykładzie powyżej składa się z 4 zestawów współrzędnych LatLng. Zwróć jednak uwagę, że pierwszy i ostatni zbiór określają tę samą lokalizację, co kończy pętlę. W praktyce jednak, ponieważ wielokąty definiują zamknięte obszary, nie trzeba określać ostatniego zestawu współrzędnych. Interfejs Maps JavaScript API automatycznie uzupełni wielokąt, rysując linię, która połączy ostatnią lokalizację z powrotem z pierwszą lokalizacją dla danej ścieżki.
Poniższy przykład jest taki sam jak poprzedni, z tym że ostatni LatLng jest pominięty: view example.
Usuwanie wielokąta
Aby usunąć z mapy wielokąt, wywołaj metodę setMap() przekazującą jako argument null. W tym przykładzie bermudaTriangle jest obiektem wielokąta:
bermudaTriangle.setMap(null);
Należy pamiętać, że powyższa metoda nie usuwa wielokąta. Spowoduje to usunięcie wielokąta z mapy. Jeśli chcesz usunąć wielokąt, usuń go z mapy, a następnie ustaw sam wielokąt na null.
Sprawdzanie wielokąta
Wielokąt określa swój ciąg współrzędnych w postaci tablicy tablic, gdzie każda tablica jest typu MVCArray. Każda tablica „leaf” to tablica współrzędnych LatLng wskazująca 1 ścieżkę. Aby pobrać te współrzędne, wywołaj metodę getPaths() obiektu Polygon. Tablica jest typu MVCArray, więc musisz poddawać jej manipulacjom i badać za pomocą tych operacji:
getAt()zwraca wartośćLatLngprzy danej wartości indeksu liczonej od zera.insertAt()wstawia przekazaną wartośćLatLngdla danej wartości indeksu liczonej od zera. Pamiętaj, że wszystkie istniejące współrzędne w tej wartości indeksu są przenoszone do przodu.- Funkcja
removeAt()usuwa elementLatLngprzy 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;
Wypróbuj fragment
Wstawianie otworów w wielokąta
Aby utworzyć pusty obszar w obrębie wielokąta, musisz utworzyć 2 ścieżki, jedną w drugiej. Aby utworzyć otwór, współrzędne określające ścieżkę wewnętrzną muszą być w przeciwnej kolejności niż współrzędne określające ścieżkę zewnętrzną. Jeśli na przykład współrzędne ścieżki zewnętrznej są podane w prawo, to ścieżka wewnętrzna musi być przeciwnie.
Uwaga: warstwa danych obsługuje kolejność ścieżek wewnętrznych i zewnętrznych, co ułatwia rysowanie wielokątów z otworami. Więcej informacji znajdziesz w dokumentacji warstwy danych.
W poniższym przykładzie rysowano wielokąt z 2 ścieżkami, przy czym ścieżka wewnętrzna była wijąca się w przeciwnym kierunku niż ścieżka zewnętrzna.
TypeScript
// This example creates a triangular polygon with a hole in it.
function initMap(): void {
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
zoom: 5,
center: { lat: 24.886, lng: -70.268 },
}
);
// Define the LatLng coordinates for the polygon's outer path.
const outerCoords = [
{ lat: 25.774, lng: -80.19 },
{ lat: 18.466, lng: -66.118 },
{ lat: 32.321, lng: -64.757 },
];
// Define the LatLng coordinates for the polygon's inner path.
// Note that the points forming the inner path are wound in the
// opposite direction to those in the outer path, to form the hole.
const innerCoords = [
{ lat: 28.745, lng: -70.579 },
{ lat: 29.57, lng: -67.514 },
{ lat: 27.339, lng: -66.668 },
];
// Construct the polygon, including both paths.
const bermudaTriangle = new google.maps.Polygon({
paths: [outerCoords, innerCoords],
strokeColor: "#FFC107",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FFC107",
fillOpacity: 0.35,
});
bermudaTriangle.setMap(map);
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
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;
Wypróbuj fragment
Prostokąty
Oprócz ogólnej klasy Polygon interfejs Google Maps JavaScript API zawiera konkretną klasę obiektów
Rectangle, aby uprościć ich konstrukcję.
Dodaj prostokąt
Element Rectangle jest podobny do Polygon pod tym względem, że umożliwia definiowanie niestandardowych kolorów, grubości i przezroczystości krawędzi prostokąta (kreski) oraz niestandardowych kolorów i przezroczystości dla obszaru wewnątrz prostokąta (wypełnienia). Kolory powinny być określone przy użyciu liczb szesnastkowych HTML.
W przeciwieństwie do Polygon tag paths nie jest zdefiniowany dla właściwości Rectangle. Zamiast tego prostokąt ma właściwość bounds, która określa jego kształt, określając dla niego
google.maps.LatLngBounds.
Właściwość editable prostokąta określa, czy użytkownicy mogą edytować kształt. Zobacz sekcję Kształty dostępne do edycji przez użytkownika poniżej. Możesz też ustawić właściwość draggable, która umożliwia 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;
Wypróbuj fragment
Podany niżej 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;
Wypróbuj fragment
Usuwanie prostokąta
Aby usunąć prostokąt z mapy, wywołaj metodę setMap(), przekazując null jako argument.
rectangle.setMap(null);
Należy pamiętać, że powyższa metoda nie usuwa prostokąta. Usuwa prostokąt z mapy. Jeśli zamiast tego chcesz usunąć prostokąt, usuń go z mapy, a następnie ustaw go na null.
Kółka
Oprócz ogólnej klasy Polygon interfejs Google Maps JavaScript API zawiera konkretną klasę obiektów
Circle, aby uprościć ich konstrukcję.
Dodaj krąg
Element Circle jest podobny do Polygon, ponieważ umożliwia definiowanie niestandardowych kolorów, grubości i przezroczystości krawędzi okręgu (kreski) oraz niestandardowych kolorów i przezroczystości dla obszaru w okręgu (wypełnienie). Kolory powinny być określone przy użyciu liczb szesnastkowych HTML.
W przeciwieństwie do Polygon tag paths nie jest zdefiniowany dla właściwości Circle. Krąg ma 2 dodatkowe właściwości definiujące jego kształt:
centerokreślagoogle.maps.LatLngśrodka okręgu.radiusokreśla promień koła w metrach.
Właściwość editable kręgu określa, czy użytkownicy mogą edytować kształt. Zobacz sekcję Kształty dostępne do edycji przez użytkownika poniżej.
Możesz też ustawić właściwość draggable, która umożliwia 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;
Wypróbuj fragment
Usuwanie kręgu
Aby usunąć okrąg z mapy, wywołaj metodę setMap(), przekazując null jako argument.
circle.setMap(null);
Pamiętaj, że powyższa metoda nie powoduje usunięcia kręgu. Usuwa okrąg z mapy. Jeśli zamiast tego chcesz usunąć krąg, usuń go z mapy, a następnie ustaw sam okrąg na null.
Kształty, które można edytować i przeciągać przez użytkownika
Edytowanie kształtu powoduje dodanie do niego uchwytów, za pomocą których można zmieniać jego położenie, kształt i rozmiar bezpośrednio na mapie. Kształt może być też przeciągany, dzięki czemu użytkownicy będą mogli przenosić go 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 zebrać i zapisać te informacje.
Włącz możliwość edytowania kształtu
Każdy kształt (linie łamane, wielokąty, okręgi i prostokąty) można ustawić jako możliwy do edytowania przez użytkownika. W tym celu należy ustawić 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 w stałej pozycji. 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
});
Gdy włączasz przeciąganie wielokąta lub linii łamanej, musisz też ustawić wielokąt lub linię łamaną jako geodezyjną, ustawiając jego właściwość geodesic na true.
Przesunięty wielokąt geodezyjny zachowuje swój prawdziwy kształt geograficzny, co powoduje, że wielokąt ten jest zniekształcony podczas przesuwania na północ lub południe w odwzorowaniu Merkatora. Wielokąty niegeodetyczne zawsze zachowują swój początkowy wygląd na ekranie.
W przypadku geodezyjnej linii łamanej odcinki linii łamanej są rysowane jako najkrótsza ścieżka między 2 punktami na powierzchni Ziemi przy założeniu, że Ziemia jest kulą, a nie liniami prostymi w rzutie Merkatora.
Więcej informacji o układach współrzędnych znajdziesz w przewodniku dotyczącym współrzędnych map i fragmentów.
Na poniższej mapie wyświetlają się 2 trójkąty o mniej więcej identycznych wymiarach. Czerwony trójkąt ma właściwość geodesic ustawioną na true. Zwróć uwagę, jak zmienia się jej kształt w miarę przesuwania się na północ.
Odsłuchiwanie zdarzeń edycji
Edytowanie kształtu powoduje uruchomienie zdarzenia po zakończeniu edycji. Zdarzenia te wymieniono poniżej.
| Kształt | Wydarzenia |
|---|---|
| Koło |
radius_changedcenter_changed
|
| Wielokąt |
insert_atremove_atset_at
Detektor musi być ustawiony na ścieżkę wielokąta. Jeśli wielokąt ma wiele ścieżek, dla każdej z nich należy ustawić odbiornik. |
| Linia łamana |
insert_atremove_atset_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.');
});
Przykład obsługi zdarzenia edycji w prostokącie: zobacz przykład.
Wykrywanie zdarzeń przeciągania
Gdy przeciągasz kształt, zdarzenia są wywoływane na początku i na końcu przeciągania, a także w trakcie 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 zaczyna przeciągać kształt. |
drag |
Uruchamiane wielokrotnie podczas przeciągania kształtu przez użytkownika. |
dragend |
Uruchamiane, gdy użytkownik przestanie przeciągać kształt. |
Więcej informacji o obsłudze zdarzeń znajdziesz w dokumentacji zdarzeń.