Формы и линии

Выберите платформу: Android iOS JavaScript

На карту можно добавлять различные фигуры. Фигура — это объект на карте, привязанный к координатам широты/долготы. Доступны следующие фигуры: линии , многоугольники , круги и прямоугольники . Вы также можете настроить фигуры таким образом, чтобы пользователи могли редактировать или перетаскивать их .

Полилинии

Для построения линии на карте используйте полилинию. Класс Polyline определяет линейное наложение соединенных отрезков на карте. Объект Polyline представляет собой массив координат LatLng и создает последовательность отрезков, соединяющих эти координаты в упорядоченном порядке.

Добавить ломаную линию

Конструктор Polyline принимает набор параметров PolylineOptions , определяющих координаты LatLng линии, и набор стилей для настройки визуального поведения полилинии.

Polyline отображаются на карте в виде ряда прямых отрезков. Вы можете задать пользовательские цвета, толщину и прозрачность линии в параметрах PolylineOptions при её построении, или изменить эти свойства после построения. Полилиния поддерживает следующие стили обводки:

  • strokeColor задает шестнадцатеричный HTML-цвет в формате "#FFFFFF" . Класс Polyline не поддерживает именованные цвета.
  • strokeOpacity задает числовое значение от 0.0 до 1.0 для определения прозрачности цвета линии. Значение по умолчанию — 1.0 .
  • strokeWeight задает ширину линии в пикселях.

Свойство editable полилинии определяет, могут ли пользователи редактировать фигуру. См. раздел «Фигуры, редактируемые пользователем» ниже. Аналогично, вы можете установить свойство draggable , чтобы разрешить пользователям перетаскивать линию .

В этом примере создается красная ломаная линия шириной в два пикселя, показывающая маршрут первого транстихоокеанского перелета между Оклендом, Калифорния, и Брисбеном, Австралия.

Машинопись 

// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 3,
      center: { lat: 0, lng: -180 },
      mapTypeId: "terrain",
    }
  );

  const flightPlanCoordinates = [
    { lat: 37.772, lng: -122.214 },
    { lat: 21.291, lng: -157.821 },
    { lat: -18.142, lng: 178.431 },
    { lat: -27.467, lng: 153.027 },
  ];
  const flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2,
  });

  flightPath.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript 

// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 3,
    center: { lat: 0, lng: -180 },
    mapTypeId: "terrain",
  });
  const flightPlanCoordinates = [
    { lat: 37.772, lng: -122.214 },
    { lat: 21.291, lng: -157.821 },
    { lat: -18.142, lng: 178.431 },
    { lat: -27.467, lng: 153.027 },
  ];
  const flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2,
  });

  flightPath.setMap(map);
}

window.initMap = initMap;
index.js
Посмотреть пример

Попробуйте образец

Удалить полилинию

Чтобы удалить полилинию с карты, вызовите метод setMap() передав в качестве аргумента null . В следующем примере flightPath — это объект полилинии:

flightPath.setMap(null);

Обратите внимание, что описанный выше метод не удаляет полилинию. Он удаляет полилинию с карты. Если же вы хотите удалить полилинию, вам следует удалить её с карты, а затем присвоить самой полилинии значение null .

Проверьте ломаную линию

Полилиния задаёт последовательность координат в виде массива объектов LatLng . Эти координаты определяют путь линии. Чтобы получить координаты, вызовите метод getPath() , который вернёт массив типа MVCArray . Вы можете манипулировать массивом и просматривать его содержимое с помощью следующих операций:

  • getAt() возвращает LatLng по заданному индексу, начинающемуся с нуля.
  • insertAt() вставляет переданные LatLng в заданный индекс, начинающийся с нуля. Обратите внимание, что любые существующие координаты в этом индексе сдвигаются вперед.
  • removeAt() удаляет элемент LatLng по заданному индексу, отсчитываемому с нуля.

Следующий пример демонстрирует построение ломаной линии на основе щелчков мыши (щелкните по карте, чтобы добавить вершину).

Машинопись 

// This example creates an interactive map which constructs a polyline based on
// user clicks. Note that the polyline only appears once its path property
// contains two LatLng coordinates.

let poly: google.maps.Polyline;
let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 7,
    center: { lat: 41.879, lng: -87.624 }, // Center the map on Chicago, USA.
  });

  poly = new google.maps.Polyline({
    strokeColor: "#000000",
    strokeOpacity: 1.0,
    strokeWeight: 3,
  });
  poly.setMap(map);

  // Add a listener for the click event
  map.addListener("click", addLatLng);
}

// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event: google.maps.MapMouseEvent) {
  const path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng as google.maps.LatLng);

  // Add a new marker at the new plotted point on the polyline.
  new google.maps.Marker({
    position: event.latLng,
    title: "#" + path.getLength(),
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript 

// This example creates an interactive map which constructs a polyline based on
// user clicks. Note that the polyline only appears once its path property
// contains two LatLng coordinates.
let poly;
let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 7,
    center: { lat: 41.879, lng: -87.624 }, // Center the map on Chicago, USA.
  });
  poly = new google.maps.Polyline({
    strokeColor: "#000000",
    strokeOpacity: 1.0,
    strokeWeight: 3,
  });
  poly.setMap(map);
  // Add a listener for the click event
  map.addListener("click", addLatLng);
}

// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event) {
  const path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng);
  // Add a new marker at the new plotted point on the polyline.
  new google.maps.Marker({
    position: event.latLng,
    title: "#" + path.getLength(),
    map: map,
  });
}

window.initMap = initMap;
index.js
Посмотреть пример

Попробуйте образец

Настройте полилинию

Вы можете добавлять векторные изображения к полилинии в виде символов. Сочетание символов и класса PolylineOptions позволяет вам значительно контролировать внешний вид полилиний на карте. См. раздел «Символы» для получения информации о стрелках , пунктирных линиях , пользовательских символах и анимированных символах .

Многоугольники

Многоугольник представляет собой область, заключенную в замкнутый контур (или петлю), определяемый рядом координат. Объекты Polygon похожи на объекты Polyline тем, что они состоят из ряда координат в упорядоченной последовательности. Многоугольники рисуются с помощью обводки и заливки. Вы можете задать пользовательские цвета, толщину и прозрачность для края многоугольника (обводки), а также пользовательские цвета и прозрачность для заключенной в него области (заливки). Цвета должны быть указаны в шестнадцатеричном формате HTML. Названия цветов не поддерживаются.

Polygon объекты могут описывать сложные формы, в том числе:

  • Несколько несмежных областей, ограниченных одним многоугольником.
  • Участки с отверстиями.
  • Пересечения одной или нескольких областей.

Для определения сложной фигуры используется многоугольник, состоящий из нескольких контуров.

Примечание: Слой данных предоставляет простой способ рисования многоугольников. Он автоматически обрабатывает изгибы многоугольников, упрощая рисование многоугольников с отверстиями. См. документацию по слою данных .

Добавить многоугольник

Поскольку полигональная область может включать несколько отдельных путей, свойство paths объекта Polygon задает массив массивов, каждый из которых имеет тип MVCArray . Каждый массив определяет отдельную последовательность упорядоченных координат LatLng .

Для простых многоугольников, состоящих всего из одного пути, можно создать объект Polygon используя один массив координат LatLng . API JavaScript Maps преобразует простой массив в массив массивов при создании объекта, сохраняя его в свойстве paths . API предоставляет простой метод getPath() для многоугольников, состоящих из одного пути.

Свойство editable многоугольника определяет, могут ли пользователи редактировать фигуру. См. раздел «Фигуры, редактируемые пользователем» ниже. Аналогично, вы можете установить свойство draggable , чтобы разрешить пользователям перетаскивать фигуру .

Машинопись 

// This example creates a simple polygon representing the Bermuda Triangle.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 5,
      center: { lat: 24.886, lng: -70.268 },
      mapTypeId: "terrain",
    }
  );

  // Define the LatLng coordinates for the polygon's path.
  const triangleCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
    { lat: 25.774, lng: -80.19 },
  ];

  // Construct the polygon.
  const bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript 

// This example creates a simple polygon representing the Bermuda Triangle.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 5,
    center: { lat: 24.886, lng: -70.268 },
    mapTypeId: "terrain",
  });
  // Define the LatLng coordinates for the polygon's path.
  const triangleCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
    { lat: 25.774, lng: -80.19 },
  ];
  // Construct the polygon.
  const bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

window.initMap = initMap;
index.js
Посмотреть пример

Попробуйте образец

Автозавершение полигона

В приведенном выше примере Polygon состоит из четырех наборов координат LatLng , но обратите внимание, что первый и последний наборы определяют одно и то же местоположение, что замыкает цикл. Однако на практике, поскольку многоугольники определяют замкнутые области, вам не нужно указывать последний набор координат. API JavaScript Maps автоматически завершит построение многоугольника, нарисовав линию, соединяющую последнее местоположение с первым местоположением для любого заданного пути.

Следующий пример идентичен предыдущему, за исключением того, что последний LatLng опущен: посмотреть пример .

Удалить многоугольник

Чтобы удалить многоугольник с карты, вызовите метод setMap() передав в качестве аргумента null . В следующем примере bermudaTriangle — это объект многоугольника:

bermudaTriangle.setMap(null);

Обратите внимание, что описанный выше метод не удаляет полигон. Он удаляет полигон с карты. Если же вы хотите удалить полигон, вам следует удалить его с карты, а затем присвоить самому полигону значение null .

Проверить многоугольник

Многоугольник задаёт свою последовательность координат в виде массива массивов, где каждый массив имеет тип MVCArray . Каждый «листовой» массив представляет собой массив координат LatLng определяющих один путь. Для получения этих координат вызовите метод getPaths() объекта Polygon . Поскольку массив является массивом MVCArray вам потребуется манипулировать им и анализировать его с помощью следующих операций:

  • getAt() возвращает LatLng по заданному индексу, начинающемуся с нуля.
  • insertAt() вставляет переданные LatLng в заданный индекс, начинающийся с нуля. Обратите внимание, что любые существующие координаты в этом индексе сдвигаются вперед.
  • removeAt() удаляет элемент LatLng по заданному индексу, отсчитываемому с нуля.

Машинопись 

// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.

let map: google.maps.Map;

let infoWindow: google.maps.InfoWindow;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 5,
    center: { lat: 24.886, lng: -70.268 },
    mapTypeId: "terrain",
  });

  // Define the LatLng coordinates for the polygon.
  const triangleCoords: google.maps.LatLngLiteral[] = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];

  // Construct the polygon.
  const bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);

  // Add a listener for the click event.
  bermudaTriangle.addListener("click", showArrays);

  infoWindow = new google.maps.InfoWindow();
}

function showArrays(event: any) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  // @ts-ignore
  const polygon = this as google.maps.Polygon;
  const vertices = polygon.getPath();

  let contentString =
    "<b>Bermuda Triangle polygon</b><br>" +
    "Clicked location: <br>" +
    event.latLng.lat() +
    "," +
    event.latLng.lng() +
    "<br>";

  // Iterate over the vertices.
  for (let i = 0; i < vertices.getLength(); i++) {
    const xy = vertices.getAt(i);

    contentString +=
      "<br>" + "Coordinate " + i + ":<br>" + xy.lat() + "," + xy.lng();
  }

  // Replace the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);

  infoWindow.open(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript 

// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.
let map;
let infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 5,
    center: { lat: 24.886, lng: -70.268 },
    mapTypeId: "terrain",
  });

  // Define the LatLng coordinates for the polygon.
  const triangleCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];
  // Construct the polygon.
  const bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
  // Add a listener for the click event.
  bermudaTriangle.addListener("click", showArrays);
  infoWindow = new google.maps.InfoWindow();
}

function showArrays(event) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  // @ts-ignore
  const polygon = this;
  const vertices = polygon.getPath();
  let contentString =
    "<b>Bermuda Triangle polygon</b><br>" +
    "Clicked location: <br>" +
    event.latLng.lat() +
    "," +
    event.latLng.lng() +
    "<br>";

  // Iterate over the vertices.
  for (let i = 0; i < vertices.getLength(); i++) {
    const xy = vertices.getAt(i);

    contentString +=
      "<br>" + "Coordinate " + i + ":<br>" + xy.lat() + "," + xy.lng();
  }

  // Replace the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);
  infoWindow.open(map);
}

window.initMap = initMap;
index.js
Посмотреть пример

Попробуйте образец

Проделать отверстие в многоугольнике

Чтобы создать пустое пространство внутри многоугольника, необходимо создать два пути, один внутри другого. Для создания отверстия координаты внутреннего пути должны быть расположены в обратном порядке по сравнению с координатами внешнего пути. Например, если координаты внешнего пути расположены по часовой стрелке, то координаты внутреннего пути должны быть расположены против часовой стрелки.

Примечание: Слой данных автоматически определяет порядок внутренних и внешних контуров, что упрощает рисование многоугольников с отверстиями. См. документацию по слою данных .

В следующем примере изображен многоугольник с двумя путями, причем внутренний путь закручен в противоположном направлении по отношению к внешнему.

Машинопись 

// This example creates a triangular polygon with a hole in it.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 5,
      center: { lat: 24.886, lng: -70.268 },
    }
  );

  // Define the LatLng coordinates for the polygon's  outer path.
  const outerCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];

  // Define the LatLng coordinates for the polygon's inner path.
  // Note that the points forming the inner path are wound in the
  // opposite direction to those in the outer path, to form the hole.
  const innerCoords = [
    { lat: 28.745, lng: -70.579 },
    { lat: 29.57, lng: -67.514 },
    { lat: 27.339, lng: -66.668 },
  ];

  // Construct the polygon, including both paths.
  const bermudaTriangle = new google.maps.Polygon({
    paths: [outerCoords, innerCoords],
    strokeColor: "#FFC107",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FFC107",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript 

// This example creates a triangular polygon with a hole in it.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 5,
    center: { lat: 24.886, lng: -70.268 },
  });
  // Define the LatLng coordinates for the polygon's  outer path.
  const outerCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];
  // Define the LatLng coordinates for the polygon's inner path.
  // Note that the points forming the inner path are wound in the
  // opposite direction to those in the outer path, to form the hole.
  const innerCoords = [
    { lat: 28.745, lng: -70.579 },
    { lat: 29.57, lng: -67.514 },
    { lat: 27.339, lng: -66.668 },
  ];
  // Construct the polygon, including both paths.
  const bermudaTriangle = new google.maps.Polygon({
    paths: [outerCoords, innerCoords],
    strokeColor: "#FFC107",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FFC107",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

window.initMap = initMap;
index.js
Посмотреть пример

Попробуйте образец

Прямоугольники

В дополнение к общему классу Polygon , JavaScript API Google Maps включает в себя специальный класс для объектов Rectangle , упрощающий их создание.

Добавьте прямоугольник

Rectangle похож на Polygon тем, что вы можете задать пользовательские цвета, толщину и прозрачность для краев прямоугольника (обводка), а также пользовательские цвета и прозрачность для области внутри прямоугольника (заливка). Цвета следует указывать в шестнадцатеричном числовом формате HTML.

В отличие от Polygon , для Rectangle не нужно задавать paths . Вместо этого у прямоугольника есть свойство bounds , которое определяет его форму, указывая значение google.maps.LatLngBounds .

Свойство ` editable прямоугольника определяет, могут ли пользователи редактировать фигуру. См. раздел «Фигуры, редактируемые пользователем» ниже. Аналогично, вы можете установить свойство draggable , чтобы разрешить пользователям перетаскивать прямоугольник .

Машинопись 

// This example adds a red rectangle to a map.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 11,
      center: { lat: 33.678, lng: -116.243 },
      mapTypeId: "terrain",
    }
  );

  const rectangle = new google.maps.Rectangle({
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    map,
    bounds: {
      north: 33.685,
      south: 33.671,
      east: -116.234,
      west: -116.251,
    },
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript 

// This example adds a red rectangle to a map.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 11,
    center: { lat: 33.678, lng: -116.243 },
    mapTypeId: "terrain",
  });
  const rectangle = new google.maps.Rectangle({
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    map,
    bounds: {
      north: 33.685,
      south: 33.671,
      east: -116.234,
      west: -116.251,
    },
  });
}

window.initMap = initMap;
index.js
Посмотреть пример

Попробуйте образец

Приведенный ниже код создает прямоугольник каждый раз, когда пользователь изменяет масштаб карты. Размер прямоугольника определяется размером области просмотра.

Машинопись 

// This example creates a rectangle based on the viewport
// on any 'zoom-changed' event.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 11,
      center: { lat: 40.74852, lng: -73.981687 },
      mapTypeId: "terrain",
    }
  );

  const rectangle = new google.maps.Rectangle();

  map.addListener("zoom_changed", () => {
    // Get the current bounds, which reflect the bounds before the zoom.
    rectangle.setOptions({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      bounds: map.getBounds() as google.maps.LatLngBounds,
    });
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript 

// This example creates a rectangle based on the viewport
// on any 'zoom-changed' event.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 11,
    center: { lat: 40.74852, lng: -73.981687 },
    mapTypeId: "terrain",
  });
  const rectangle = new google.maps.Rectangle();

  map.addListener("zoom_changed", () => {
    // Get the current bounds, which reflect the bounds before the zoom.
    rectangle.setOptions({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      bounds: map.getBounds(),
    });
  });
}

window.initMap = initMap;
index.js
Посмотреть пример

Попробуйте образец

Удалите прямоугольник

Чтобы удалить прямоугольник с карты, вызовите метод setMap() , передав в качестве аргумента null . 

rectangle.setMap(null);

Обратите внимание, что описанный выше метод не удаляет прямоугольник. Он удаляет прямоугольник с карты. Если же вы хотите удалить прямоугольник, вам следует удалить его с карты, а затем присвоить самому прямоугольнику значение null .

Круги

В дополнение к общему классу Polygon , JavaScript API Google Maps включает в себя специальный класс для объектов Circle , упрощающий их создание.

Добавить круг

Circle похож на Polygon тем, что вы можете задать пользовательские цвета, толщину и прозрачность для края круга (обводка), а также пользовательские цвета и прозрачность для области внутри круга (заливка). Цвета следует указывать в шестнадцатеричном числовом формате HTML.

В отличие от Polygon , для Circle не нужно задавать paths . Вместо этого круг имеет два дополнительных свойства, определяющих его форму:

  • center указывает координаты центра круга google.maps.LatLng .
  • radius обозначает радиус окружности в метрах.

Свойство editable круга определяет, могут ли пользователи редактировать фигуру. См. раздел «Фигуры, редактируемые пользователем» ниже. Аналогично, вы можете установить свойство draggable , чтобы разрешить пользователям перетаскивать круг .

В следующем примере круги используются для отображения приблизительного времени пешего перехода между точками в Киото, Япония. Выберите нужное расстояние в меню, щелкните по карте, чтобы центрировать круг, и перетащите круг, чтобы изменить его положение.

Машинопись 

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
let innerMap;

async function initMap() {
    // Import the needed libraries.
    // Request needed libraries.
    (await google.maps.importLibrary('maps')) as google.maps.MapsLibrary;
    (await google.maps.importLibrary('marker')) as google.maps.MarkerLibrary;
    // Get the gmp-map element.
    const mapElement = document.querySelector(
        'gmp-map'
    ) as google.maps.MapElement;

    const initialCenter = { lat: 34.98956821576194, lng: 135.74239981260283 }; // Hotel Emion, Kyoto, Japan

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    const buttons = document.querySelectorAll('input[name="radius"]');

    const walkingCircle = new google.maps.Circle({
        strokeColor: '#ffdd00ff',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#ffdd00ff',
        fillOpacity: 0.35,
        map: innerMap,
        center: initialCenter,
        radius: 400,
        draggable: true,
        editable: false,
    });

    // Define a "Crosshair" vector icon
    const parser = new DOMParser();
    const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-6 -6 12 12"><path d="M -6,0 L 6,0 M 0,-6 L 0,6" stroke="black" stroke-width="1"/></svg>`;

    const pinSvg = parser.parseFromString(
        svgString,
        'image/svg+xml'
    ).documentElement;

    const centerMarker = new google.maps.marker.AdvancedMarkerElement({
        position: initialCenter,
        title: 'A marker using a custom SVG image.',
        //@ts-ignore
        anchorLeft: '-50%',
        anchorTop: '-50%',
    });
    centerMarker.append(pinSvg);
    mapElement.append(centerMarker);

    // Wait for the map to finish drawing its tiles.
    google.maps.event.addListenerOnce(innerMap, 'tilesloaded', function () {
        // Get the controls div
        const controls = document.getElementById('control-panel');

        // Display controls once map is loaded.
        if (controls) {
            controls.style.display = 'block';
        }
    });

    // Add event listener to update the radius based on user selection.
    buttons.forEach((button) => {
        button.addEventListener('change', (event) => {
            const target = event.target as HTMLInputElement;
            walkingCircle.setRadius(Number(target.value));
        });
    });

    // Handle user click, reset the map center and position the circle.
    innerMap.addListener('click', (mapsMouseEvent) => {
        const newCenter = mapsMouseEvent.latLng;
        walkingCircle.setCenter(newCenter);
        centerMarker.position = newCenter;
        innerMap.panTo(newCenter);
    });

    // Handle user dragging the circle, update the center marker position.
    walkingCircle.addListener('center_changed', () => {
        centerMarker.position = walkingCircle.getCenter();
    });
}

initMap();
index.ts

JavaScript 

const mapElement = document.querySelector('gmp-map');
let innerMap;
async function initMap() {
    // Import the needed libraries.
    // Request needed libraries.
    (await google.maps.importLibrary('maps'));
    (await google.maps.importLibrary('marker'));
    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map');
    const initialCenter = { lat: 34.98956821576194, lng: 135.74239981260283 }; // Hotel Emion, Kyoto, Japan
    // Get the inner map.
    const innerMap = mapElement.innerMap;
    const buttons = document.querySelectorAll('input[name="radius"]');
    const walkingCircle = new google.maps.Circle({
        strokeColor: '#ffdd00ff',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#ffdd00ff',
        fillOpacity: 0.35,
        map: innerMap,
        center: initialCenter,
        radius: 400,
        draggable: true,
        editable: false,
    });
    // Define a "Crosshair" vector icon
    const parser = new DOMParser();
    const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-6 -6 12 12"><path d="M -6,0 L 6,0 M 0,-6 L 0,6" stroke="black" stroke-width="1"/></svg>`;
    const pinSvg = parser.parseFromString(svgString, 'image/svg+xml').documentElement;
    const centerMarker = new google.maps.marker.AdvancedMarkerElement({
        position: initialCenter,
        title: 'A marker using a custom SVG image.',
        //@ts-ignore
        anchorLeft: '-50%',
        anchorTop: '-50%',
    });
    centerMarker.append(pinSvg);
    mapElement.append(centerMarker);
    // Wait for the map to finish drawing its tiles.
    google.maps.event.addListenerOnce(innerMap, 'tilesloaded', function () {
        // Get the controls div
        const controls = document.getElementById('control-panel');
        // Display controls once map is loaded.
        if (controls) {
            controls.style.display = 'block';
        }
    });
    // Add event listener to update the radius based on user selection.
    buttons.forEach((button) => {
        button.addEventListener('change', (event) => {
            const target = event.target;
            walkingCircle.setRadius(Number(target.value));
        });
    });
    // Handle user click, reset the map center and position the circle.
    innerMap.addListener('click', (mapsMouseEvent) => {
        const newCenter = mapsMouseEvent.latLng;
        walkingCircle.setCenter(newCenter);
        centerMarker.position = newCenter;
        innerMap.panTo(newCenter);
    });
    // Handle user dragging the circle, update the center marker position.
    walkingCircle.addListener('center_changed', () => {
        centerMarker.position = walkingCircle.getCenter();
    });
}
initMap();
index.js

CSS 

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#control-panel {
  display: none; /* Set to 'display: block' after the map loads. */
  background-color: #fff;
  border: 2px solid #fff;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  font-family: "Roboto", "sans-serif";
  font-size: medium;
  margin: 10px;
  padding: 10px;
}
style.css

HTML 

<html>
    <head>
        <title>Circles</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <!-- prettier-ignore -->
        <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
    </head>
    <body>
        <gmp-map
            center="34.98956821576194, 135.74239981260283"
            zoom="15"
            map-id="DEMO_MAP_ID">
            <div id="control-panel" slot="control-inline-start-block-start">
                <input
                    id="short-walk"
                    type="radio"
                    name="radius"
                    value="400"
                    checked />
                <label for="short-walk">Short Walk (~5 minutes)</label><br />
                <input
                    id="medium-walk"
                    type="radio"
                    name="radius"
                    value="800" />
                <label for="medium-walk">Medium Walk (~15 minutes)</label><br />
                <input id="long-walk" type="radio" name="radius" value="1600" />
                <label for="long-walk">Long Walk (~30 minutes) </label>
            </div>
        </gmp-map>
    </body>
</html>
index.html
Посмотреть пример

Попробуйте образец

Удалите круг

Чтобы удалить круг с карты, вызовите метод 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 .

Геодезический многоугольник сохраняет свою истинную географическую форму при перемещении, из-за чего он может выглядеть искаженным при перемещении на север или юг в проекции Меркатора. Негеодезические многоугольники всегда сохраняют свой первоначальный вид на экране.

В геодезической полилинии отрезки полилинии изображаются как кратчайший путь между двумя точками на поверхности Земли, при условии, что Земля является сферой, в отличие от прямых линий в проекции Меркатора.

Для получения более подробной информации о системах координат обратитесь к руководству по координатам карт и тайлов .

На следующей карте показаны два треугольника примерно одинакового размера и габаритов. У красного треугольника свойство geodesic установлено в true . Обратите внимание, как меняется его форма по мере продвижения на север.

Посмотреть пример

Прослушайте события редактирования

При редактировании фигуры по завершении редактирования срабатывает событие. Список этих событий приведен ниже.

Форма События
Круг radius_changed
center_changed
Многоугольник insert_at
remove_at
set_at

Слушатель должен быть установлен на пути многоугольника. Если многоугольник имеет несколько путей, слушатель должен быть установлен на каждом из них.

Полилайн insert_at
remove_at
set_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.');
});

Пример обработки события редактирования прямоугольника можно посмотреть здесь: view example .

Послушайте, как затягиваются события.

При перетаскивании фигуры события срабатывают в начале и конце процесса перетаскивания, а также во время самого перетаскивания. Для полилиний, многоугольников, окружностей и прямоугольников срабатывают следующие события.

Событие Описание
dragstart Событие срабатывает, когда пользователь начинает перетаскивать фигуру.
drag Срабатывает многократно, пока пользователь перетаскивает фигуру.
dragend Событие срабатывает, когда пользователь прекращает перетаскивание фигуры.

Для получения более подробной информации об обработке событий см. документацию по событиям .