如何计算距离另一个点一定距离的点的latlng?

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):

靠近北极

  • @Nirmal:不,它取决于您传递给`destinationPoint()`的第一个参数.90是东,但你可以使用任何轴承,从0 =北开始,顺时针方向移动. (4认同)
  • 这会在两极附近工作吗?即它会产生一些在地图上看起来不是圆形的东西,但它在地球上是圆形的吗? (4认同)
  • @Daniel,这是原始问题可以获得的高质量答案.请保持好的工作状态! (4认同)

小智 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 有关文档