Все готово!

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

Активация Google Maps JavaScript API

Чтобы помочь вам освоиться, мы покажем, как выполнить некоторые необходимые действия в консоли разработчика Google:

  1. Создание или выбор проекта
  2. Активация Google Maps JavaScript API и связанных служб
  3. Создание соответствующих ключей

Библиотека Geometry

  1. Обзор
  2. Основные понятия сферической геометрии
    1. Функции расстояния и площади
    2. Функции навигации
  3. Кодирование геометрии
  4. Функции многоугольников и ломаных линий
    1. containsLocation()
    2. isLocationOnEdge()

Обзор

Концепции в этом документе относятся к функциям, которые доступны только в библиотеке google.maps.geometry. Эта библиотека не загружается по умолчанию при загрузке Google Maps Javascript API, но должна быть явно указана с помощью параметра загрузочной строки libraries.

Подробные сведения изложены в разделе Обзор библиотек.

Библиотека геометрии Google Maps JavaScript API обеспечивает служебные функции для расчета геометрических данных на поверхности Земли. Библиотека содержит три пространства имен:

  • spherical – средства сферической геометрии для расчета углов, расстояний и площадей по координатам широты и долготы.
  • encoding – средства кодирования и декодирования путей ломаных линий в соответствии с алгоритмом кодированных ломаных линий.
  • poly – служебные функции для расчетов, связанных с многоугольниками и ломаными линиями.

Библиотека google.maps.geometry не содержит никаких классов, а содержит статические методы вышеуказанных пространств имен.

Основные понятия сферической геометрии

Изображения в Google Maps JavaScript API двухмерные и "плоские". Однако Земля является трехмерной и часто приближенно рассматривается как сплюснутый сфероид или проще как сфера. В Maps API Земля рассматривается как сфера, а для ее отображения в двухмерном виде (например, на экране) используется проекция.

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

В связи с этими отличиями геометрические функции на сфере (или ее проекции) требуют использования сферической геометрии для расчета таких элементов как расстояние, направление и площадь. Средства расчета сферических геометрических параметров содержатся в пространстве имен google.maps.geometry.spherical Google Maps API. Это пространство имен предоставляет статические методы для расчета скалярных значений по сферическим координатам (широте и долготе).

Функции расстояния и площади

Расстояние между двумя точками – длина кратчайшего пути между ними. Кратчайший путь называется геодезической линией. Все геодезические линии на сфере являются сегментами большой окружности. Для вычисления этого расстояния нужно вызвать метод computeDistanceBetween() и передать ему два объекта LatLng.

Вы можете также использовать computeLength() для расчета длины указанного пути, если он проходит через несколько точек.

Результаты расчета расстояния выражаются в метрах.

Для расчета площади (в квадратных метрах) многоугольной области нужно вызвать метод computeArea() и передать ему массив объектов LatLng, определяющих замкнутый контур.

При навигации на сфере ориентация представляет собой угол направления относительно фиксированного ориентира, обычно истинного (географического) севера. В Google Maps API направления определяются в градусах и измеряются как отклонения по часовой стрелке от истинного севера (0 градусов). Угол направления для двух точек можно рассчитать с помощью метода computeHeading(), передав ему два объекта LatLng с координатами from (исходная точка) и to (точка назначения).

Если известны угол направления, исходная точка и расстояние пути (в метрах), координаты назначения можно рассчитать с помощью метода computeOffset().

Если известны два объекта LatLng и значение от 0 до 1, которое указывает часть пути между ними, пункт назначения между этими точками можно рассчитать с помощью метода interpolate(), который выполняет сферическую линейную интерполяцию по двум точкам.

В следующем примере при нажатии двух точек на карте создаются две ломаные линии – одна геодезическая и одна "прямая" линия, соединяющая две точки, – и рассчитывается угол направления движения между этими точками:

// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">

var marker1, marker2;
var poly, geodesicPoly;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 34, lng: -40.605}
  });

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(
      document.getElementById('info'));

  marker1 = new google.maps.Marker({
    map: map,
    draggable: true,
    position: {lat: 40.714, lng: -74.006}
  });

  marker2 = new google.maps.Marker({
    map: map,
    draggable: true,
    position: {lat: 48.857, lng: 2.352}
  });

  var bounds = new google.maps.LatLngBounds(
      marker1.getPosition(), marker2.getPosition());
  map.fitBounds(bounds);

  google.maps.event.addListener(marker1, 'position_changed', update);
  google.maps.event.addListener(marker2, 'position_changed', update);

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

  geodesicPoly = new google.maps.Polyline({
    strokeColor: '#CC0099',
    strokeOpacity: 1.0,
    strokeWeight: 3,
    geodesic: true,
    map: map
  });

  update();
}

function update() {
  var path = [marker1.getPosition(), marker2.getPosition()];
  poly.setPath(path);
  geodesicPoly.setPath(path);
  var heading = google.maps.geometry.spherical.computeHeading(path[0], path[1]);
  document.getElementById('heading').value = heading;
  document.getElementById('origin').value = path[0].toString();
  document.getElementById('destination').value = path[1].toString();
}
<div id="map"></div>
<div id="floating-panel">
  Origin: <input type="text" readonly id="origin">
  Destination: <input type="text" readonly id="destination"><br>
  Heading: <input type="text" readonly id="heading"> degrees
</div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry&callback=initMap"
    async defer></script>
// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">

var marker1, marker2;
var poly, geodesicPoly;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 34, lng: -40.605}
  });

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(
      document.getElementById('info'));

  marker1 = new google.maps.Marker({
    map: map,
    draggable: true,
    position: {lat: 40.714, lng: -74.006}
  });

  marker2 = new google.maps.Marker({
    map: map,
    draggable: true,
    position: {lat: 48.857, lng: 2.352}
  });

  var bounds = new google.maps.LatLngBounds(
      marker1.getPosition(), marker2.getPosition());
  map.fitBounds(bounds);

  google.maps.event.addListener(marker1, 'position_changed', update);
  google.maps.event.addListener(marker2, 'position_changed', update);

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

  geodesicPoly = new google.maps.Polyline({
    strokeColor: '#CC0099',
    strokeOpacity: 1.0,
    strokeWeight: 3,
    geodesic: true,
    map: map
  });

  update();
}

function update() {
  var path = [marker1.getPosition(), marker2.getPosition()];
  poly.setPath(path);
  geodesicPoly.setPath(path);
  var heading = google.maps.geometry.spherical.computeHeading(path[0], path[1]);
  document.getElementById('heading').value = heading;
  document.getElementById('origin').value = path[0].toString();
  document.getElementById('destination').value = path[1].toString();
}

Просмотр примера (geometry-headings.html).

Методы кодирования

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

Библиотека geometry содержит пространство имен encoding для средств кодирования и декодирования ломаных линий.

Статический метод encodePath() кодирует указанный путь. Вы можете передать в него массив значений LatLng или массив MVCArray, возвращаемый методом Polyline.getPath().

Для декодирования закодированного пути нужно просто вызвать метод decodePath() и передать в него закодированную строку.

В следующем примере показана карта города Оксфорд (штат Миссисипи, США). Нажатие на карту добавляет точку к ломаной линии. По мере построения ломаной линии под ней появляется ее кодированное представление.

// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: {lat: 34.366, lng: -89.519}
  });
  var poly = new google.maps.Polyline({
    strokeColor: '#000000',
    strokeOpacity: 1,
    strokeWeight: 3,
    map: map
  });

  // Add a listener for the click event
  google.maps.event.addListener(map, 'click', function(event) {
    addLatLngToPoly(event.latLng, poly);
  });
}

/**
 * Handles click events on a map, and adds a new point to the Polyline.
 * Updates the encoding text area with the path's encoded values.
 */
function addLatLngToPoly(latLng, poly) {
  var path = poly.getPath();
  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear
  path.push(latLng);

  // Update the text field to display the polyline encodings
  var encodeString = google.maps.geometry.encoding.encodePath(path);
  if (encodeString) {
    document.getElementById('encoded-polyline').value = encodeString;
  }
}
<div id="map"></div>
<div id="right-panel">
  <div>Encoding:</div>
  <textarea id="encoded-polyline"></textarea>
</div>
#right-panel {
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

#right-panel select, #right-panel input {
  font-size: 15px;
}

#right-panel select {
  width: 100%;
}

#right-panel i {
  font-size: 12px;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
  width: 50%;
  float: left;
}
#right-panel {
  width: 46%;
  float: left;
}
#encoded-polyline {
  height: 100px;
  width: 100%;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry&callback=initMap"
    async defer></script>
// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: {lat: 34.366, lng: -89.519}
  });
  var poly = new google.maps.Polyline({
    strokeColor: '#000000',
    strokeOpacity: 1,
    strokeWeight: 3,
    map: map
  });

  // Add a listener for the click event
  google.maps.event.addListener(map, 'click', function(event) {
    addLatLngToPoly(event.latLng, poly);
  });
}

/**
 * Handles click events on a map, and adds a new point to the Polyline.
 * Updates the encoding text area with the path's encoded values.
 */
function addLatLngToPoly(latLng, poly) {
  var path = poly.getPath();
  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear
  path.push(latLng);

  // Update the text field to display the polyline encodings
  var encodeString = google.maps.geometry.encoding.encodePath(path);
  if (encodeString) {
    document.getElementById('encoded-polyline').value = encodeString;
  }
}

Просмотр примера (geometry-encodings.html).

Функции многоугольников и ломаных линий

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

containsLocation()

containsLocation(point:LatLng, polygon:Polygon)

Чтобы узнать, находится ли указанная точка внутри многоугольника, нужно передать эту точку и многоугольник в метод google.maps.geometry.poly.containsLocation(). Функции возвращают значение true, если точка находится внутри многоугольника или на его границе.

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

function initialize() {
  var mapOptions = {
    zoom: 5,
    center: new google.maps.LatLng(24.886, -70.269),
    mapTypeId: 'terrain'
  };

  var map = new google.maps.Map(document.getElementById('map'),
      mapOptions);

  var bermudaTriangle = new google.maps.Polygon({
    paths: [
      new google.maps.LatLng(25.774, -80.190),
      new google.maps.LatLng(18.466, -66.118),
      new google.maps.LatLng(32.321, -64.757)
    ]
  });

  google.maps.event.addListener(map, 'click', function(event) {
    console.log(google.maps.geometry.poly.containsLocation(event.latLng, bermudaTriangle));
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

Другой вариант этого кода рисует на карте красный круг при нажатии внутри Бермудского треугольника, и зеленый круг – в противном случае:

Просмотр примера (poly-containsLocation)

isLocationOnEdge()

isLocationOnEdge(point:LatLng, poly:Polygon|Polyline, tolerance?:number)

Чтобы определить, находится ли точка на ломаной линии или рядом с ней, или находится она на границе многоугольника или рядом с ней, нужно передать точку, ломаную линию/многоугольник и (необязательно) величину погрешности в градусах в метод google.maps.geometry.poly.isLocationOnEdge(). Функция возвращает значение true, если расстояние между точкой и ближайшей точкой на линии или грани не находится в пределах погрешности. По умолчанию значение погрешности составляет 10-9 градусов.

function initialize() {
  var myPosition = new google.maps.LatLng(46.0, -125.9);

  var mapOptions = {
    zoom: 5,
    center: myPosition,
    mapTypeId: 'terrain'
  };

  var map = new google.maps.Map(document.getElementById('map'),
      mapOptions);

  var cascadiaFault = new google.maps.Polyline({
    path: [
      new google.maps.LatLng(49.95, -128.1),
      new google.maps.LatLng(46.26, -126.3),
      new google.maps.LatLng(40.3, -125.4)
    ]
  });

  cascadiaFault.setMap(map);

  if (google.maps.geometry.poly.isLocationOnEdge(myPosition, cascadiaFault, 10e-1)) {
    alert("Relocate!");
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

Оставить отзыв о...

Текущей странице
Google Maps JavaScript API
Google Maps JavaScript API
Нужна помощь? Обратитесь в службу поддержки.