高德地图实现标点测量两个点之间的直线距离

六月初六月初 地图开发 2022-08-23 12:35:06

测量地图任意两个点之间的直线距离是多少公里，在地图应用中是一个常见的功能。那么在高德地图中，要如何实现该功能呢？

效果如图：


分析：

由图可知，我们在地图上标记了任意两个点之间的黑色虚线。那么我们如何要知道这两个点连成的虚线具体是多少公里呢？从前面文章我们知道如何通过两组经纬度计算其距离，那么实现如图效果也就是在地图上画虚线，然后获取虚线两个端点的经纬度即可。

代码如下：

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  7.     <title>标注和标注图层-文字展示</title>
  8.     <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
  9.     <style>
  10.         html, body, #container {
  11.             height: 100%;
  12.             width: 100%;
  13.             margin: 0;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18. <div id="container"></div>
  19. <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=高德后台申请的key"></script>
  20. <script type="text/javascript">
  21.     var map = new AMap.Map('container', {
  22.         zoom: 4.5,
  23.         center: [109.610747, 35.15261],
  24.         showIndoorMap: false,
  25.         showLabel: false,
  26.         mapStyle: 'amap://styles/fresh',
  27.     });
  28.     var marker;
  29.     var rulerList = [];
  30.     map.on('click', (e) => {
  31.             rulerList.push([e.lnglat.lng,e.lnglat.lat]);
  32.             if(rulerList.length>2){
  33.                 rulerList.length = 0
  34.                 map.remove(polyline)
  35.             }else{
  36.                 if(rulerList.length == 1){
  37.                     marker = new AMap.Marker({
  38.                         position: new AMap.LngLat(e.lnglat.lng,e.lnglat.lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
  39.                     });
  40.                     map.add(marker);
  41.                 }else{
  42.                     map.remove(marker);    
  43.                     polyline = new AMap.Polyline({
  44.                       path: rulerList ==1?cacheList:rulerList,
  45.                         borderWeight: 3,
  46.                         strokeColor: "#000",
  47.                         strokeOpacity: 1,
  48.                         strokeWeight: 4,
  49.                         // 折线样式还支持 'dashed'
  50.                         strokeStyle: "dashed",
  51.                         // strokeStyle是dashed时有效
  52.                         strokeDasharray: [15, 5],
  53.                         lineJoin: 'round',
  54.                         lineCap: 'round',
  55.                         zIndex: 50,
  56.                     })
  57.                     map.add(polyline);
  58.                     var Distance = GetDistance(rulerList[0][1],rulerList[0][0],rulerList[1][1],rulerList[1][0])
  59.                     console.log(Distance+' KM')
  60.                 }
  61.             }
  62.     });
  63.     
  64.     function GetDistance(lat1, lng1, lat2, lng2) {
  65.         // var p1 = [lat1, lng1];
  66.         // var p2 = [lat2, lng2];
  67.         // // 返回 p1 到 p2 间的地面距离，单位：米
  68.         // var dis = AMap.GeometryUtil.distance(p1, p2);
  69.         // console.log(dis)
  70.         // return dis;
  71.         var radLat1 = lat1 * Math.PI / 180.0;
  72.         var radLat2 = lat2 * Math.PI / 180.0;
  73.         var a = radLat1 - radLat2;
  74.         var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
  75.         var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
  76.       Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
  77.         s = s * 6378.137; // EARTH_RADIUS;
  78.         s = Math.round(s * 10000) / 10000;
  79.         return s;
  80.     }
  81. </script>
  82. </body>
  83. </html>
Collapse Code

以上便可获取到两点之间的公里数。

铁子们，抗不住了。点点广告可好，感谢您的支持。
六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！