Формы и линии

Выберите платформу: 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

Примечание. Прочтите руководство по использованию TypeScript и Google Maps.

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

Примечание. JavaScript скомпилирован из фрагмента TypeScript.

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

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

JSFiddle.net Google Cloud Shell

Удаление полилинии

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

flightPath.setMap(null);

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

Проверка полилинии

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

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

Примечание. Вы не можете получить i- й элемент массива, используя синтаксис mvcArray[i] . Вы должны использовать mvcArray.getAt(i) .

Машинопись

// 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

Примечание. Прочтите руководство по использованию TypeScript и Google Maps.

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

Примечание. JavaScript скомпилирован из фрагмента TypeScript.

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

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

JSFiddle.net Google Cloud Shell

Настройка полилинии

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

Полигоны

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

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

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

Чтобы определить сложную форму, вы используете многоугольник с несколькими путями.

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

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

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

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

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

Свойство 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

Примечание. Прочтите руководство по использованию TypeScript и Google Maps.

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

Примечание. JavaScript скомпилирован из фрагмента TypeScript.

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

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

JSFiddle.net Google Cloud Shell

Автодополнение полигонов

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

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

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

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

bermudaTriangle.setMap(null);

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

Удаление полигона аналогично удалению полилинии. Чтобы увидеть код в действии для полилинии: просмотрите пример .

Осмотр многоугольника

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

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

Примечание. Вы не можете получить i- й элемент массива, используя синтаксис mvcArray[i] . Вы должны использовать mvcArray.getAt(i) .

Машинопись

// 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

Примечание. Прочтите руководство по использованию TypeScript и Google Maps.

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

Примечание. JavaScript скомпилирован из фрагмента TypeScript.

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

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

JSFiddle.net Google Cloud Shell

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

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

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

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

Машинопись

// 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

Примечание. Прочтите руководство по использованию TypeScript и Google Maps.

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

Примечание. JavaScript скомпилирован из фрагмента TypeScript.

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

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

JSFiddle.net Google Cloud Shell

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

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

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

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

В отличие от Polygon , вы не определяете paths для Rectangle . Вместо этого у прямоугольника есть свойство 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

Примечание. Прочтите руководство по использованию TypeScript и Google Maps.

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

Примечание. JavaScript скомпилирован из фрагмента TypeScript.

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

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

JSFiddle.net Google Cloud Shell

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

Машинопись

// 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

Примечание. Прочтите руководство по использованию TypeScript и Google Maps.

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

Примечание. JavaScript скомпилирован из фрагмента TypeScript.

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

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

JSFiddle.net Google Cloud Shell

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

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

rectangle.setMap(null);

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

Удаление прямоугольника аналогично удалению ломаной линии. Чтобы увидеть код в действии для полилинии: просмотрите пример .

Круги

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

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

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

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

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

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

Машинопись

// 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;
index.ts

Примечание. Прочтите руководство по использованию TypeScript и Google Maps.

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;
index.js

Примечание. JavaScript скомпилирован из фрагмента TypeScript.

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

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

JSFiddle.net Google Cloud Shell

Удалить круг

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

См. пример обработки события редактирования на прямоугольнике: см. пример .

Слушайте перетаскивание событий

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

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

Подробнее об обработке событий см. в документации по событиям .