На карту можно добавлять различные фигуры. Фигура – это объект на карте (линия, многоугольник, окружность или прямоугольник), привязанный к географическим координатам. Свойства фигур можно настроить так, чтобы пользователи имели возможность редактировать и перетаскивать их.
Ломаные линии
Чтобы начертить линию на карте, используйте ломаную линию. Класс Polyline определяет линейное наложение соединенных отрезков прямой на карту. Объект Polyline состоит из массива точек LatLng и создает отрезки прямой, соединяющие эти точки в заданной последовательности.
Добавление ломаной линии
Конструктор Polyline берет набор параметров PolylineOptions, задающих координаты LatLng линии и набор стилей для настройки ее отображения.
Объекты Polyline (полилинии) рисуются на карте в виде последовательности прямых отрезков. С помощью свойств объекта PolylineOptions можно задать цвет, толщину и прозрачность линии (как во время, так и после ее отрисовки).
Ломаная линия поддерживает следующие стили штрихов:
strokeColorзадает шестнадцатеричный цвет HTML в формате"#FFFFFF". КлассPolylineне поддерживает именованные цвета.strokeOpacity– числовое значение в диапазоне от0.0до1.0, определяющее прозрачность линии. Значение по умолчанию –1.0.strokeWeight– толщина линии в пикселях.
Свойство полилинии editable определяет, может ли пользователь редактировать ее (подробнее читайте в разделе Формы, редактируемые пользователем). Свойство draggable определяет, может ли пользовать перетаскивать линию.
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;
Примеры кода
Удаление ломаной линии
Чтобы удалить ломаную линию с карты, вызовите метод setMap() и передайте с его помощью аргумент null. Во фрагменте кода ниже flightPath обозначает ломаную линию.
flightPath.setMap(null);
Отметим, что этот метод не удаляет ломаную линию окончательно, а просто убирает ее с карты. Чтобы полностью удалить полилинию, необходимо также присвоить ее объекту значение null.
Проверка ломаной линии
Полилиния задает последовательность координат в форме массива объектов LatLng. Координаты определяют форму линии.
Чтобы получить координаты, вызовите метод getPath(), который возвращает массив MVCArray. Для проверки и управления массивом можно использовать следующие методы:
getAt(): возвращает объектLatLngдля заданного индексного значения (с точкой отсчета в нуле).insertAt(): вставляет переданный объектLatLngв позицию для заданного индексного значения (с точкой отсчета в нуле). При этом индексные значения всех остальных координат смещаются.removeAt(): удаляет объектLatLngс заданной индексным значением позиции.
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;
Примеры кода
Настройка ломаной линии
Вы можете добавлять к ломаной линии векторные изображения в виде символов. Применение символов и класса PolylineOptions дает широкие возможности для настройки внешнего вида полилиний на карте.
В статье Символы подробно рассматриваются стрелки, пунктирные линии, персонализированные и анимированные символы.
Многоугольники
Многоугольник – это область, ограниченная замкнутым контуром, который определяется последовательностью координат.
Объекты Polygon похожи на Polyline тем, что состоят из заданной последовательности координат.
Многоугольники отрисовываются линиями и заливкой. Вы можете задавать цвета, толщину и прозрачность границ многоугольника (линий), а также цвета и прозрачность заливки. Цвета следует указывать в шестнадцатеричном формате HTML. Названия цветов не поддерживаются.
С помощью объектов Polygon можно определять сложные фигуры, в том числе:
- несколько не прилегающих друг к другу областей, определяемых одним многоугольником;
- области с вырезанными сегментами;
- пересечения одной или нескольких областей.
Для определения сложных фигур используется многоугольник из нескольких контуров.
Примечание. Отрисовывать многоугольники очень просто в слое данных, который облегчает рисование изгибов и фигур с отверстиями. Подробнее читайте в разделе Слой данных.
Добавление многоугольника
Поскольку многоугольная область может содержать несколько контуров, свойство paths объекта Polygon определяет массив массивов типа MVCArray. Каждый из включенных массивов определяет собственную последовательность координат LatLng.
Если вы хотите нарисовать простой многоугольник с одним путем, достаточно создать объект Polygon с единым массивом координат LatLng. При вызове конструктора Maps JavaScript API преобразует простой массив в массив массивов и сохраняет его в свойстве paths. Для простых многоугольников в API предусмотрен метод getPath().
Свойство многоугольника editable определяет, может ли пользователь редактировать его (подробнее читайте в разделе Формы, редактируемые пользователем).
Свойство draggable определяет, может ли пользователь перетаскивать многоугольник.
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;
Примеры кода
Автозавершение многоугольников
Объект Polygon из предыдущего примера содержит четыре пары координат LatLng. Обратите внимание: первая и последняя координаты находятся в одной точке, образуя замкнутый контур. На практике указывать последнюю координату не требуется, поскольку многоугольники по определению являются замкнутыми фигурами. Maps JavaScript API автоматически дорисовывает все многоугольники, соединяя последнюю координату с первой для любого заданного пути.
Этот пример идентичен предыдущему, за исключением того, что последнее значение LatLng опущено.
Удаление многоугольника
Чтобы удалить многоугольник с карты, вызовите метод setMap() и передайте с его помощью аргумент null. В примере ниже используется многоугольник bermudaTriangle.
bermudaTriangle.setMap(null);
Отметим, что вышеуказанный метод не удаляет многоугольник окончательно, а просто убирает его с карты. Чтобы полностью удалить многоугольник, необходимо также задать для его объекта значение null.
Проверка многоугольника
Многоугольник определяет серию своих координат как массив массивов типа MVCArray. Каждый подчиненный массив – это набор координат LatLng, определяющий один путь. Чтобы извлечь эти координаты, вызовите для объекта Polygon метод getPaths(). Поскольку массив является объектом MVCArray, для работы с ним нужно использовать перечисленные ниже методы.
getAt(): возвращает объектLatLngдля заданного индексного значения (с точкой отсчета в нуле).insertAt(): вставляет переданный объектLatLngв позицию для заданного индексного значения (с точкой отсчета в нуле). При этом индексные значения всех остальных координат смещаются.removeAt(): удаляет объектLatLngс заданной индексным значением позиции.
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;
Примеры кода
Отверстие в многоугольнике
Чтобы добавить пустую область внутрь многоугольника, нужно создать два контура, один внутри другого. Координаты, определяющие контур отверстия (внутренний), должны быть указаны в порядке, противоположном порядку координат внешнего контура. Например, если координаты внешнего контура идут по часовой стрелке, координаты внутреннего пути должны идти против часовой стрелки.
Примечание. Слой данных самостоятельно определяет порядок внутренних и внешних контуров, облегчая создание многоугольников с отверстиями. Подробнее читайте в разделе Слой данных.
В следующем примере показан многоугольник с двумя контурами, где внутренний контур прорисовывается в направлении, противоположном внешнему.
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;
Примеры кода
Прямоугольники
Помимо общего класса Polygon, в Maps JavaScript API предусмотрен специальный класс Rectangle, упрощающий создание прямоугольников.
Добавление прямоугольника
Прямоугольник (Rectangle) похож на многоугольник (Polygon) тем, что вы можете задавать цвет, толщину и прозрачность границ, а также цвет и прозрачность заливки. Цвета следует указывать в шестнадцатеричном числовом формате HTML.
В отличие от Polygon, задавать объект paths для фигуры Rectangle не требуется. Вместо него используется свойство bounds, определяющее форму прямоугольника при помощи объекта google.maps.LatLngBounds.
Свойство прямоугольника editable определяет, может ли пользователь редактировать его (подробнее читайте в разделе Формы, редактируемые пользователем). Свойство draggable определяет, может ли пользователь перетаскивать прямоугольник.
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;
Примеры кода
Следующий код прорисовывает прямоугольник каждый раз, когда пользователь изменяет масштаб карты. Размер прямоугольника определяется областью просмотра.
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;
Примеры кода
Удаление прямоугольника
Чтобы удалить прямоугольник с карты, вызовите метод setMap() и передайте с его помощью аргумент null.
rectangle.setMap(null);
Отметим, что этот метод не удаляет прямоугольник окончательно, а лишь убирает его с карты. Чтобы полностью удалить прямоугольник, необходимо также задать для его объекта значение null.
Окружности
Помимо общего класса Polygon, в Maps JavaScript API предусмотрен специальный класс Circle, упрощающий создание окружностей.
Добавление окружности
Фигура Circle похожа на Polygon тем, что вы можете задавать ее цвет, толщину и прозрачность очертания, а также цвет и прозрачность заливки. Цвета следует указывать в шестнадцатеричном числовом формате HTML.
В отличие от Polygon, для Circle не требуется задавать paths. Вместо этого для окружности предусмотрены два других свойства, определяющих ее форму:
centerзадает значенияgoogle.maps.LatLngдля центра окружности.radiusзадает радиус окружности в метрах.
Свойство окружности editable определяет, может ли пользователь редактировать ее (подробнее читайте в разделе Формы, редактируемые пользователем).
Свойство draggable определяет, может ли пользователь перетаскивать окружность.
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;
Примеры кода
Удаление окружности
Чтобы удалить окружность с карты, вызовите метод setMap() и передайте с его помощью аргумент null.
circle.setMap(null);
Отметим, что это метод не удаляет окружность окончательно, а лишь убирает ее с карты. Чтобы полностью удалить окружность, необходимо также задать для ее объекта значение null.
Редактируемые и перетаскиваемые фигуры
Разрешение на редактирование фигуры добавляет к ней маркеры, с помощью которых пользователи могут изменять ее положение, форму и размеры прямо на карте. Также фигуру можно сделать перетаскиваемой, чтобы пользователи могли перемещать ее по карте.
Изменения объектов, выполненные пользователями, не сохраняются между сеансами. Если вы хотите сохранять пользовательские правки, ваше приложение должно уметь записывать и сохранять их.
Как сделать фигуру редактируемой
Пользователь может редактировать полилинии, многоугольники, окружности и прямоугольники, если для параметра editable соответствующей фигуры установлено значение true.
var bounds = {
north: 44.599,
south: 44.490,
east: -78.443,
west: -78.649
};
// Define a rectangle and set its editable property to true.
var rectangle = new google.maps.Rectangle({
bounds: bounds,
editable: true
});
Как сделать фигуру перетаскиваемой
Положение нарисованной на карте фигуры по умолчанию фиксировано. Чтобы разрешить пользователям перетаскивать фигуру, присвойте переменной draggable в настройках фигуры значение 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
});
Если вы разрешите пользователям перетаскивать полилинию или многоугольник, лучше включите для этой фигуры геодезические линии, задав для свойства geodesic значение true.
При перемещении на север или юг в проекции Меркатора геодезический многоугольник сохраняет свою географическую форму, в результате чего выглядит искаженным. Негеодезические многоугольники всегда сохраняют на экране свой изначальный вид.
Cегменты геодезических ломаных линий отрисовываются как кратчайший путь между двумя точками на поверхности Земли (сфероида), а не прямыми линиями на проекции Меркатора.
Подробнее о системах координат читайте в статье Координаты карт и фрагментов.
На следующей карте показаны два треугольника примерно одних и тех же размеров. Свойство geodesic красного треугольника имеет значение true, поэтому его форма немного искажается при смещении к северу.
Как отслеживать события редактирования
Ниже приведен список событий, которые активируются по завершении редактирования фигуры.
| Фигура | События |
|---|---|
| Окружность |
radius_changedcenter_changed
|
| Многоугольник |
insert_atremove_atset_at
Для контура многоугольника необходимо настроить прослушиватель событий. Если многоугольник включает несколько контуров, это необходимо сделать для каждого из них. |
| Ломаная линия |
insert_atremove_atset_at
Прослушиватель требуется установить на контуре ломаной линии. |
| Прямоугольник | bounds_changed |
Полезные фрагменты кода:
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.');
});
Пример обработки события редактирования прямоугольника см. здесь.
Отслеживание событий перетаскивания
События активируются в начале, в конце и в процессе перетаскивания. Ниже перечислены события, активирующиеся с ломаными линиями, многоугольниками, окружностями и прямоугольниками.
| Событие | Описание |
|---|---|
dragstart |
Активируется, когда пользователь начинает перетаскивать фигуру. |
drag |
Активируется многократно во время перескакивания. |
dragend |
Активируется, когда пользователь заканчивает перетаскивать фигуру. |