微信小程序map地址间距离计算以及导航功能实现

在微信小程序当中，实现简易的、没有很多复杂功能的地图，可以选用小程序的原生map组件。WXML如下：<map id="mymap" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" markers="{{markers}}&

文章共610字 · 阅读需要大约3分钟

一键AI生成摘要，助你高效阅读

问答

@xiaomajia

10036人浏览 · 2018-12-05 16:07:54

@xiaomajia · 2018-12-05 16:07:54 发布

在微信小程序当中，实现简易的、没有很多复杂功能的地图，可以选用小程序的原生map组件。

WXML如下：

<map id="mymap" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" markers="{{markers}}" subkey="IULBZ-XXXX-XXXX-XXXX-XXXX" bindmarkertap="markertap" show-location>
</map>

常用属性如下：（来自微信公众平台-小程序开发文档）

属性	类型	默认值	说明
longitude	Number		中心经度
latitude	Number		中心纬度
scale	Number	16	缩放级别，取值范围为5-18
markers	Array		标记点
subkey	String	''	个性化地图使用的key，仅初始化地图时有效
bindmarkertap	EventHandle		点击标记点时触发，会返回marker的id

1、导航功能实现

需求：从当前位置导航至标记点所在的位置，当点击标记点时触发导航功能

markertap: function (e) {
    wx.openLocation({
      latitude: 39.915378,
      longitude: 116.403694,
      scale: 18,
      name: '天安门广场',
      address:'北京市东城区长安街'
    })
},

2、两点间距离的计算（默认单位km）

    //进行经纬度转换为距离的计算
    function Rad(d){
       return d * Math.PI / 180.0;//经纬度转换成三角函数中度分表形式。
    }

    //计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
    function GetDistance(lat1,lng1,lat2,lng2){
 
        var radLat1 = Rad(lat1);
        var radLat2 = Rad(lat2);
        var a = radLat1 - radLat2;
        var  b = Rad(lng1) - Rad(lng2);
        var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) +
        Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
        s = s *6378.137 ;// EARTH_RADIUS;
        s = Math.round(s * 10000) / 10000; //输出为公里
        //s=s.toFixed(2);
        return s;
    }

PS：上面的公式是通过弧度公式算出来的球体上两点之间的最短距离，和导航上的步行/骑行等距离有差别。

参考：https://blog.csdn.net/zzjiadw/article/details/7031610