Do mapy możesz dodawać różne kształty. Kształt to obiekt na mapie powiązany z szerokością i długością geograficzną. Dostępne są te kształty: linie, wielokąty, kółka i prostokąty. Możesz też skonfigurować kształty tak, aby użytkownicy mogli je edytować lub przeciągać.
Linie łamane
Aby narysować na mapie linię, 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 szereg segmentów liniowych łączących te lokalizacje w ułożonej sekwencji.
Dodaj linię łamaną
Konstruktor Polyline pobiera zestaw PolylineOptions określający współrzędne linii LatLng i zestaw stylów, aby dostosowywać działanie linii łamanych.
Obiekty Polyline są rysowane jako serie prostych segmentów na mapie. Podczas tworzenia linii możesz określić niestandardowe kolory, wagi i przezroczystość kreski w obrębie obiektu PolylineOptions. Możesz też zmienić te właściwości po utworzeniu kompilacji.
Linia łamana obsługuje następujące style kreski:
strokeColorokreśla szesnastkowy kod HTML w formacie"#FFFFFF". KlasaPolylinenie obsługuje kolorów nazwanych.strokeOpacityokreśla wartość liczbową między0.0a1.0, aby określić 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 kształty dostępne dla użytkowników poniżej. Podobnie możesz ustawić właściwość draggable, aby umożliwić użytkownikom przeciąganie wiersza.
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;
Fragment
Usuwanie linii łamanej
Aby usunąć linię łamaną z mapy, wywołaj metodę setMap() przekazującą argument null. W tym przykładzie flightPath jest obiektem łamanym:
flightPath.setMap(null);
Ta metoda nie usuwa linii łamanej. Powoduje usunięcie linii łamanej z mapy. Jeśli chcesz usunąć linię łamaną, usuń ją z mapy, a następnie ustaw linię łamaną na null.
Badanie linii łamanej
Linia łamana określa serię współrzędnych jako tablicę obiektów LatLng. Te współrzędne określają ścieżkę linii.
Aby pobrać współrzędne, wywołaj getPath(), która zwróci tablicę typu MVCArray. Możesz edytować i badać tablicę przy użyciu tych operacji:
getAt()zwracaLatLngprzy danej wartości indeksu opartej na wartości zero.insertAt()wstawia wstawianą wartośćLatLngw podanej wartości indeksu opartej na wartości zero. Pamiętaj, że wszystkie istniejące współrzędne o tej wartości indeksu są przenoszone dalej.removeAt()usuwa wartośćLatLngprzy danej wartości indeksu opartej na wartości zero.
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;
Fragment
Dostosuj linię łamaną
Do linii łamanej można dodać obrazy wektorowe w postaci symboli. Kombinacja symboli i klasa PolylineOptions dają Ci dużą kontrolę nad wyglądem linii łamanych na mapie.
Na stronie Symbole znajdziesz informacje na temat strzałek,
linii przerywanych,
symboli niestandardowych
i animowanych symboli.
Wielokąty
Wielokąt reprezentuje obszar zamknięty przez pętlę (czyli pętlę), którą definiuje się za pomocą serii współrzędnych.
Obiekty Polygon są podobne do obiektów Polyline, ponieważ składają się z szeregu współrzędnych w ułożonej kolejności.
Wielokąty są rysowane kreską i wypełnieniem. Możesz zdefiniować kolory, wagi i przezroczystość krawędzi wielokąta (kreski), a także kolory i nieprzezroczystość zamkniętego obszaru (wypełnienie). Kolory powinny być podane w formacie szesnastkowym HTML. Nazwy kolorów nie są obsługiwane.
Obiekty Polygon mogą opisywać złożone kształty, w tym:
- Wiele nieciągłych obszarów zdefiniowanych przez pojedynczy wielokąt.
- obszary z dziurami,
- Skrzyżowania co najmniej jednego obszaru.
Aby zdefiniować złożony kształt, użyj wielokąta o wielu ścieżkach.
Uwaga: warstwa danych zapewnia prosty sposób rysowania wielokątów. Obsługuje ona kręcenie wielokątów, co ułatwia rysowanie wielokątów z otworami. Zobacz dokumentację warstwy danych.
Dodaj wielokąt
Obszar wielokąta może zawierać kilka oddzielnych ścieżek, dlatego właściwość paths obiektu Polygon określa tablicę, z których każdy ma typ MVCArray. Każda tablica definiuje oddzielną sekwencję uporządkowanych LatLng wartości.
W przypadku prostych wielokątów składających się tylko z jednej ścieżki możesz utworzyć Polygon, korzystając z pojedynczej tablicy współrzędnych LatLng. Interfejs Maps JavaScript API konwertuje prostą tablicę na tablicę podczas tworzenia jej we właściwości paths. Interfejs API udostępnia prostą metodę getPath() dla wielokątów składających się z 1 ścieżki.
Właściwość wielokąta editable określa, czy użytkownicy mogą edytować kształt. Zobacz kształty dostępne dla użytkowników poniżej.
Podobnie możesz skonfigurować właściwość draggable, aby umożliwić użytkownikom przeciąganie kształtu.
TypeScript
// This example creates a simple polygon representing the Bermuda Triangle.
function initMap(): void {
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
zoom: 5,
center: { lat: 24.886, lng: -70.268 },
mapTypeId: "terrain",
}
);
// Define the LatLng coordinates for the polygon's path.
const triangleCoords = [
{ lat: 25.774, lng: -80.19 },
{ lat: 18.466, lng: -66.118 },
{ lat: 32.321, lng: -64.757 },
{ lat: 25.774, lng: -80.19 },
];
// Construct the polygon.
const bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
});
bermudaTriangle.setMap(map);
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
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;
Fragment
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ę, co kończy pętlę. W praktyce jednak wielokąty definiują obszary zamknięte, więc nie musisz określać ostatniego zbioru współrzędnych. Interfejs Maps JavaScript API automatycznie uzupełni wielokąt, narysowając kreski łączące ostatnią lokalizację z pierwszą lokalizacją w każdej ścieżce.
Poniższy przykład jest taki sam jak poprzedni, ale pomija LatLng (ostatni przykład): zobacz przykład.
Usuwanie wielokąta
Aby usunąć z mapy wielokąt, wywołaj metodę setMap() przekazującą argument null jako argument. W tym przykładzie obiekt bermudaTriangle jest obiektem wielokąta:
bermudaTriangle.setMap(null);
Pamiętaj, że ta metoda nie usuwa wielokąta. Usuń wielokąt z mapy. Jeśli zamiast tego chcesz usunąć wielokąt, usuń go z mapy, a następnie ustaw ten wielokąt na null.
Badanie wielokąta
Wielokąt określa szereg współrzędnych jako tablicę, z których każda ma typ MVCArray. Każda tablica „leaf” jest tablicą współrzędnych LatLng określających jedną ścieżkę. Aby pobrać te współrzędne, wywołaj metodę getPaths() obiektu Polygon. Ponieważ tablica to MVCArray, musisz ją zmodyfikować i zbadać za pomocą tych operacji:
getAt()zwracaLatLngprzy danej wartości indeksu opartej na wartości zero.insertAt()wstawia wstawianą wartośćLatLngw podanej wartości indeksu opartej na wartości zero. Pamiętaj, że wszystkie istniejące współrzędne o tej wartości indeksu są przenoszone dalej.removeAt()usuwa wartośćLatLngprzy danej wartości indeksu opartej na wartości zero.
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;
Fragment
Umieszczenie otworu w boksie
Aby utworzyć pusty obszar wewnątrz wielokąta, musisz utworzyć dwie ścieżki – jedną w drugiej. Aby utworzyć otwór, współrzędne, które określają ścieżkę wewnętrzną, muszą być w odwrotnej kolejności niż te, które określają ścieżkę zewnętrzną. Jeśli na przykład współrzędne zewnętrznej ścieżki są ułożone w kierunku przeciwnym do ruchu wskazówek zegara, wewnętrzna ścieżka musi być przeciwnie 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. Zobacz dokumentację warstwy danych.
Poniższy przykład pokazuje wielokąt z 2 ścieżkami, w których wewnętrzna ścieżka jest zaokrąglona w przeciwnym kierunku do 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;
Fragment
Prostokąty
Oprócz ogólnej klasy Polygon interfejs Google Maps JavaScript API zawiera specjalną klasę obiektów Rectangle, aby uprościć ich konstrukcję.
Dodaj prostokąt
Rectangle jest podobna do Polygon, ale możesz zdefiniować kolory, grubość i przezroczystość krawędzi prostokąta (kreska) oraz niestandardowe kolory i przezroczystość obszaru wewnątrz prostokąta (wypełnienie). Kolory powinny być szesnastkowe.
W przeciwieństwie do Polygon nie definiujesz właściwości paths 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. Patrz: kształty, które można edytować poniżej. Podobnie możesz skonfigurować właściwość draggable, aby umożliwić użytkownikom przeciąganie prostokąta.
TypeScript
// This example adds a red rectangle to a map.
function initMap(): void {
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
zoom: 11,
center: { lat: 33.678, lng: -116.243 },
mapTypeId: "terrain",
}
);
const rectangle = new google.maps.Rectangle({
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map,
bounds: {
north: 33.685,
south: 33.671,
east: -116.234,
west: -116.251,
},
});
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
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;
Fragment
Ten kod tworzy prostokąt za każdym razem, gdy użytkownik zmieni powiększenie mapy. 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;
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;
Fragment
Usuwanie prostokąta
Aby usunąć prostokąt z mapy, wywołaj metodę setMap() przekazującą argument null jako argument.
rectangle.setMap(null);
Pamiętaj, że ta metoda nie usuwa prostokąta. Usuwa prostokąt z mapy. Jeśli zamiast tego chcesz usunąć prostokąt, usuń go z mapy, a potem ustaw go na null.
Kółka
Oprócz ogólnej klasy Polygon interfejs Google Maps JavaScript API zawiera specjalną klasę obiektów Circle, aby uprościć ich konstrukcję.
Dodaj krąg
Circle jest podobna do Polygon, bo możesz zdefiniować niestandardowe kolory, ciężary i przezroczystość dla krawędzi okręgu (kolor) oraz niestandardowych kolorów i przezroczystości obszaru wewnątrz okręgu (wypełnienia). Kolory powinny być szesnastkowe.
W przeciwieństwie do Polygon nie definiujesz właściwości paths dla właściwości Circle. Zamiast tego koło ma dwie dodatkowe właściwości, które definiują jego kształt:
centerokreślagoogle.maps.LatLngśrodkowego okręgu.radiusokreśla promień koła w metrach.
Właściwość editable koła określa, czy użytkownicy mogą edytować kształt. Zobacz kształty dostępne dla użytkowników poniżej.
Podobnie możesz skonfigurować właściwość draggable, aby umożliwić 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;
Fragment
Usuwanie kręgu
Aby usunąć okrąg z mapy, wywołaj metodę setMap() przekazującą argument null jako argument.
circle.setMap(null);
Powyższa metoda nie powoduje usunięcia okręgu. Usuwa okrąg z mapy. Jeśli zamiast tego chcesz usunąć krąg, usuń go z mapy, a następnie ustaw null jako krąg.
Edytowalne przez użytkownika kształty i przeciąganie
Możliwość edytowania kształtu umożliwia dodawanie do niego uchwytów, które pozwalają go zmieniać położenie, kształt i rozmiar. Możesz też przeciągać kształty, aby użytkownicy mogli je przenieść w inne miejsce na mapie.
Zmiany wprowadzane przez użytkownika w obiekcie nie są trwałe między sesjami. Jeśli chcesz zapisać zmiany wprowadzone przez użytkownika, musisz samodzielnie zebrać i zapisać te informacje.
Włączanie możliwości edytowania kształtu
Każdy kształt (linie, wielokąty, okręgi i prostokąty) możesz ustawić jako edytowany przez ustawienie właściwości 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
});
Umożliwia przeciąganie kształtu
Domyślnie kształt rysowany na mapie ma stały położenie. Aby umożliwić użytkownikom przeciąganie kształtu do innej lokalizacji 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łączając przeciąganie wielokątem lub łamaną, możesz też utworzyć geometrię wielokąta lub łamanej, ustawiając jego właściwość geodesic na true.
Po przesunięciu wielokąta geometrycznego zostanie zachowany prawdziwy kształt, co sprawi, że wielokąt przesunięty będzie na północ lub południe w odwzorowaniu Merkatora. Niegeometryczne wielokąty zawsze będą widoczne na ekranie.
W linii łamanej geodezyjnej segmenty 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 Prostokąta Mercator.
Więcej informacji o systemach ze współrzędnymi znajdziesz w przewodniku dotyczącym współrzędnych map i kafelków.
Poniższa mapa przedstawia dwa trójkąty o mniej więcej takim samym rozmiarze i wymiarach. W czerwonym trójkątze właściwość geodesic jest ustawiona na true. Zwróć uwagę, jak kształt zmienia się, gdy porusza się na północ.
Posłuchaj zdarzeń edycji
Podczas edytowania kształtu uruchamiane jest zdarzenie po jego zakończeniu. Zdarzenia te znajdziesz poniżej.
| Kształt | Zdarzenia |
|---|---|
| Okrąg |
radius_changedcenter_changed
|
| Wielokąt |
insert_atremove_atset_at
Detektor musi być ustawiony na ścieżce wielokąta. Jeśli wielokąt ma wiele ścieżek, należy ustawić odbiornik na każdej z nich. |
| Linia łamana |
insert_atremove_atset_at
Detektor musi być ustawiony na ścieżce ł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 na prostokątie: zobacz przykład.
Posłuchaj zdarzeń przeciągnięcia
Po przeciągnięciu kształtu zdarzenia są uruchamiane na początku i na końcu działania przeciągania, a także podczas przeciągania. Poniższe zdarzenia są uruchamiane w przypadku linii łamanych, wielokątów, okręgów i prostokątów.
| Zdarzenie | Opis |
|---|---|
dragstart |
Uruchamiane, gdy użytkownik zacznie przeciągać kształt. |
drag |
Uruchamiany 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ń.