在微信小程序中插入个性化地图:进入腾讯地址服务官网,控制台、个性化渣姿此地图、个性化样册或式、样如迅式选择。>
先定位目前的位置,再根据输入的目的地进行两地之间的距离计算。(前提是先导入高德地图相应的sdk包)。
对于iOS或者安卓同学来说,可能会觉得特别简单吧。OC里就有原生类CLLocation计算坐标点距离。当然,大多数时候我们都是直接使用第三方计算,比如百度SDK。
但是接触到微信小程序后,由于可能刚起步,许多API并不完善。像百度SDK关于微信小程序的就没有提供这样的接口去计算。 百度地图微信小程序JS API
仔细翻一番看看,在开发指南->获取地图数据 菜单下只看到4个最基本的功能(POI检索、POI检索热词联想、逆地址解析、天气查询),并没有看到关于计算距离的。看到这些还好,至少不会继续下去入坑了。
后来我就度娘了,第一条检索就是腾讯地图开放平台的内容。这也是为什么今天我要写这篇文章的原因,我入坑了。友情提示,使用腾讯地图确实可以计算两坐标距离,但是呢?只能是10km以内的距离。不然调用后返握帆回结果: status: 373, message: "起终点距离超长"
如果不在意只是10km以内距离的话,想要去集成腾讯地图SDK,文档在此 腾讯地图微信小程序JavaScript SDK
最终解决方案只能自段哪雹己算了,不用第三方了。
//计算两坐标点之间的距离
getDistance: function (lat1, lng1, lat2, lng2) {
lat1 = lat1 || 0
缓首 lng1 = lng1 || 0
lat2 = lat2 || 0
lng2 = lng2 || 0
var rad1 = lat1 * Math.PI / 180.0
var rad2 = lat2 * Math.PI / 180.0
var a = rad1 - rad2
var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0
var r = 6378137
return (r * 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) * Math.cos(rad2) * Math.pow(Math.sin(b / 2), 2)))).toFixed(0)
},
需要注意的是,该方法返回单位为米,如果想要转换成公里,除以1000即可。
微信小程序距离显示可以使用地理位置API来获取用户的经纬度,然后通过计算两点之间的距离来实现距离的显示。具体的实现方法如下升慧:1. 首先,在微信答桐小程序的开发工具中,引入地理位置API,在app.json中添加"permission": { "scope.userLocation": { "desc": "你的吵举答位置信息将用于小程序位置接口的效果展示" } },这样就可以在小程序中使用地理位置API了。
2. 接着,在小程序中调用wx.getLocation()方法来获取用户的经纬度,并将获取到的经纬度传入自定义函数中,用来计算两点之间的距离。
3. 最后,根据计算出来的距离,在小程序中显示出来。如果要显示未知的距离,可以在显示的时候添加一句“未知”,来表示距离未知。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)