在特定的位置谷歌地图上画出标记

Question

我创建了使用谷歌地图API的JavaScript小工具。它以地名作为输入，提交表单时，它在该位置放置标记。这是非常基本的使用。但我想实现的是，

1. 采取该位置的经纬度为基础，并使其在中心标记（其中已经完成）
2. 一个标记10英里远离中心放置到顶部位置
3. 放置一个标记10英里远从中心到下方位置
4. 放置一个标记10英里远从中心到左侧位置
5. 将一个标记10英里远从中心到正确的位置

所以基本上不会有总共5个标记。一个在中心和4上的顶部，底部，左，在完全相同10英里距离正确的位置。我怎样才能做到这一点？

Answer 1

谷歌地图JS API具有几何库。你需要把它列入API调用：

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

该spherical namespace包含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>