在Google地圖上的特定位置繪制標記

Question

我使用Google map API javascript創建了一個小工具。 它以地名作為輸入，並在提交表單時將標記放置在該位置。 這是非常基本的用法。 但是我想實現的是

1. 以該位置的緯度-經度為基礎，並將其作為中心的標記（已完成）

2. 將一個標記從中心移到最高位置10英里處

3. 將一個標記從中心到底部位置10英里

4. 將一個記號筆從中心移至左側10英里

5. 將一個記號筆距中心10英里，移至正確位置

所以基本上會有總共5個標記。 在正好10英里的距離處居中位置一個，頂部，底部，左側和右側位置分別為4個。 我怎樣才能做到這一點？

Answer 1

Google Maps JS API具有一個Geometry庫。 您需要將其包括在API調用中：

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

球形名稱空間包含一個computeOffset()方法，該方法允許傳遞您的坐標，距離和航向。

0/360° =北， 90° =東， 180° =南，依此類推。

因此，如果您要計算從坐標0,0向東10公里處的點，則可以執行以下操作：

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

距離是以米為單位傳遞的，因此您可以簡單地將以英里為1609,34距離乘以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>