Нарисуйте маркер на Google Map в определенных местах

Question

Я создал небольшой инструмент, используя JavaScript API Google map.Он принимает название места в качестве ввода и при отправке формы помещает маркер в это место.Это очень простое использование.Но я хочу добиться того, чтобы

1. взял широту-долготу этого места в качестве базы и сделал ее маркером в центре (что уже сделано)

2. Поместите один маркер в 10 милях от центра в верхнее положение

3. Поместите один маркер в 10 милях от центра в нижнее положение

4. Поместите один маркер в 10 милях от центра в левое положение

5. Поместите один маркер в 10 милях от центра в правильное положение

Такв основном будет 5 маркеров.один в центре и 4 сверху, снизу, слева и справа на расстоянии 10 миль.Как я могу это сделать?

Answer 1

В Google Maps JS API есть библиотека Geometry.Вы должны включить его в вызов API:

https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry

Сферическое пространство имен содержит метод computeOffset(), который позволяет передаватьваши координаты, расстояние и курс.

0/360° = север, 90° = восток, 180° = юг и т. д.

Так что если вы хотите вычислить точку в 10 км к востоку от координат 0,0 вы можете сделать:

let point = google.maps.geometry.spherical.computeOffset(new google.maps.LatLng(0,0), 10000, 90);

Расстояние указано в метрах, поэтому вы можете просто умножить расстояние в милях на 1609,34.

Больше информации здесь: https://developers.google.com/maps/documentation/javascript/geometry#Geometry

Подтверждение концепции:

var map;

function initMap() {

  let center = new google.maps.LatLng(53.051185, -2.492474);

  map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 13,
    center: center
  });

  var marker = new google.maps.Marker({
    position: center,
    map: map,
  });

  addMarker(center, 1000, 0);
  addMarker(center, 1000, 90);
  addMarker(center, 1000, 180);
  addMarker(center, 1000, 270);
}

function addMarker(coords, offset, heading) {

  let point = google.maps.geometry.spherical.computeOffset(coords, offset, heading);

  var marker = new google.maps.Marker({
    position: point,
    map: map,
  });
}

initMap();

#map-canvas {
  height: 200px;
}

<div id="map-canvas"></div>

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>