Ren*_*soo 47 javascript google-maps
要在地图上绘制圆,我有一个中心GLatLng(A)和一个以米为单位的半径(r).
这是一个图表:
-----------
--/ \--
-/ \-
/ \
/ \
/ r \
| *-------------*
\ A / B
\ /
\ /
-\ /-
--\ /--
-----------
Run Code Online (Sandbox Code Playgroud)
如何计算位置B的GLatLng?假设r与赤道平行.
使用GLatLng.distanceFrom()方法获得A和B时的半径是微不足道的 - 但是反过来却不是这样.似乎我需要做一些更重的数学.
Dan*_*llo 91
我们需要一种方法,在给定方位时返回目标点,以及从源点移动的距离.幸运的是,Chris Veness在计算距离方面有一个非常好的JavaScript实现,在纬度/经度点之间有更多.
以下内容适用于该google.maps.LatLng课程:
Number.prototype.toRad = function() {
return this * Math.PI / 180;
}
Number.prototype.toDeg = function() {
return this * 180 / Math.PI;
}
google.maps.LatLng.prototype.destinationPoint = function(brng, dist) {
dist = dist / 6371;
brng = brng.toRad();
var lat1 = this.lat().toRad(), lon1 = this.lng().toRad();
var lat2 = Math.asin(Math.sin(lat1) * Math.cos(dist) +
Math.cos(lat1) * Math.sin(dist) * Math.cos(brng));
var lon2 = lon1 + Math.atan2(Math.sin(brng) * Math.sin(dist) *
Math.cos(lat1),
Math.cos(dist) - Math.sin(lat1) *
Math.sin(lat2));
if (isNaN(lat2) || isNaN(lon2)) return null;
return new google.maps.LatLng(lat2.toDeg(), lon2.toDeg());
}
Run Code Online (Sandbox Code Playgroud)
您只需按如下方式使用它:
var pointA = new google.maps.LatLng(25.48, -71.26);
var radiusInKm = 10;
var pointB = pointA.destinationPoint(90, radiusInKm);
Run Code Online (Sandbox Code Playgroud)
以下是使用Google Maps API v3的完整示例:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps Geometry</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 400px; height: 300px"></div>
<script type="text/javascript">
Number.prototype.toRad = function() {
return this * Math.PI / 180;
}
Number.prototype.toDeg = function() {
return this * 180 / Math.PI;
}
google.maps.LatLng.prototype.destinationPoint = function(brng, dist) {
dist = dist / 6371;
brng = brng.toRad();
var lat1 = this.lat().toRad(), lon1 = this.lng().toRad();
var lat2 = Math.asin(Math.sin(lat1) * Math.cos(dist) +
Math.cos(lat1) * Math.sin(dist) * Math.cos(brng));
var lon2 = lon1 + Math.atan2(Math.sin(brng) * Math.sin(dist) *
Math.cos(lat1),
Math.cos(dist) - Math.sin(lat1) *
Math.sin(lat2));
if (isNaN(lat2) || isNaN(lon2)) return null;
return new google.maps.LatLng(lat2.toDeg(), lon2.toDeg());
}
var pointA = new google.maps.LatLng(40.70, -74.00); // Circle center
var radius = 10; // 10km
var mapOpt = {
mapTypeId: google.maps.MapTypeId.TERRAIN,
center: pointA,
zoom: 10
};
var map = new google.maps.Map(document.getElementById("map"), mapOpt);
// Draw the circle
new google.maps.Circle({
center: pointA,
radius: radius * 1000, // Convert to meters
fillColor: '#FF0000',
fillOpacity: 0.2,
map: map
});
// Show marker at circle center
new google.maps.Marker({
position: pointA,
map: map
});
// Show marker at destination point
new google.maps.Marker({
position: pointA.destinationPoint(90, radius),
map: map
});
</script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
截图:

更新:
在回答保罗在下面的评论时,这就是当圆圈缠绕其中一个极点时会发生的情况.
pointA在北极附近绘制,半径为1,000km:
var pointA = new google.maps.LatLng(85, 0); // Close to north pole
var radius = 1000; // 1000km
Run Code Online (Sandbox Code Playgroud)
截图pointA.destinationPoint(90, radius):

小智 9
要计算给定方位的纬度和经度点以及与另一个的距离,您可以使用谷歌的 JavaScript 实现:
var pointA = new google.maps.LatLng(25.48, -71.26);
var distance = 10; // 10 metres
var bearing = 90; // 90 degrees
var pointB = google.maps.geometry.spherical.computeOffset(pointA, distance, bearing);
Run Code Online (Sandbox Code Playgroud)
请参阅https://developers.google.com/maps/documentation/javascript/reference#sphereal 有关文档
| 归档时间: |
|
| 查看次数: |
44077 次 |
| 最近记录: |