700字范文 > 微信小程序 - 腾讯地图使用和选点连线计算距离

微信小程序 - 腾讯地图使用和选点连线计算距离

时间：2022-05-26 11:33:35

GitHub Demo 地址:jh-weapp-demo实现一些常用效果、封装通用组件和工具类
代码不定时更新，请前往github查看最新代码

小程序码

最近练习了下腾讯地图的使用，包含地图展示、定位、自定义标注和气泡、点聚合、拖动地图选点、逆地址解析、地图连线计算距离，标注编辑和删除，具体可扫码或在demo查看。

注意：

·6月1日发布了新的公告地理位置相关接口的调用规则公告

·因为相关接口调整，请前往github查看最新代码

增加了getFuzzyLocation，getLocation限制了调用频率，
需要在app.json中配置requiredPrivateInfos
接口调用前需申请开通（「开发」-「开发管理」-「接口设置」中自助开通该接口权限）

使用定位时注意

1、接口调用前需申请开通（「开发」-「开发管理」-「接口设置」中自助开通该接口权限）
2、requiredPrivateInfos中的模糊位置和精确位置是互斥的，即声明了模糊位置信息就无法声明精确位置信息
3、getFuzzyLocation基础库2.25.0开始支持
4、需在app.json中配置requiredPrivateInfos

"requiredPrivateInfos": ["getFuzzyLocation","chooseLocation"],"permission": {"scope.userLocation": {"desc": "你的位置信息将用于小程序定位"},"scope.userFuzzyLocation": {"desc": "你的模糊位置信息将用于小程序定位"}},

效果图

实现方式

地图展示

地图使用的是腾讯地图Map组件。官方文档

逆地址解析

逆地址解析使用的是腾讯位置服务，可以通过拿到的经纬度获取到位置的一些信息

地图选点

地图选点有两种实现方式
一种是使用小程序API wx.chooseLocation
另一种通过小程序地图选点插件

根据经纬度计算距离

计算距离有两种实现方式
一种是使用腾讯位置服务的距离算法
一种根据经纬度计算地球两个经纬度的距离（haversine公式）

注：

腾讯位置服务需要注册，使用时需要在后台配置，需要下载对应js库文件，有调用频率限制
小程序插件需要在小程序后台和小程序代码配置

经纬度计算距离

//给定的经度1，纬度1；经度2，纬度2. 计算2个经纬度之间的距离。//<returns>距离（单位：米）</returns>//util的方法是通过读取类文件，然后通过映射获取的，所以需要在使用的page中加入//var util = require('../../../utils/util.js');相当于一个导入的过程。function distance(p1, p2) {//用haversine公式计算球面两点间的距离。//经纬度转换成弧度var lat1 = p1.latitude * Math.PI / 180;var lon1 = p1.longitude * Math.PI / 180;var lat2 = p2.latitude * Math.PI / 180;var lon2 = p2.longitude * Math.PI / 180;//差值var vLon = Math.abs(lon1 - lon2);var vLat = Math.abs(lat1 - lat2);//h is the great circle distance in radians, great circle就是一个球体上的切面，它的圆心即是球心的一个周长最大的圆。var v = Math.sin(vLat / 2);var v1 = Math.sin(vLon / 2);var h = v * v + Math.cos(lat1) * Math.cos(lat2) * v1 * v1;// 地球半径平均值，米var distance = 2 * 6371000 * Math.asin(Math.sqrt(h));return distance;}module.exports = {//用于映射函数distance: distance,}

地图展示和逆地址解析实现代码

wxml

<view class="map-container"><map id="myMap" class="map" latitude="{{latitude}}" longitude="{{longitude}}" show-location="{{isShowPosition}}" show-compass="{{isShowCompass}}" show-scale="{{isShowScale}}" markers="{{markers}}" scale="{{scale}}" bindregionchange="onMapChange" bindtap="onMapTap" bindmarkertap="onMapMarkTap" bindcallouttap="onMapCalloutTap"><cover-image class="centerImg {{animation ? 'locationpicker-animation' : ''}}" src="./images/ic_mark2.png" bindanimationend="onMarkerAnimationend" /><cover-view class="locationBg" catchtap='onClickLocation'><cover-image class="locationIcon" src="./images/ic_location.png" /></cover-view></map></view><van-cell-group title="拖动地图选中的位置"><van-cell title="地址描述" label="{{address}}" /><van-cell title="位置描述" label="{{recommend}}" /><van-cell title="大致位置" label="{{rough}}" /></van-cell-group><view style="padding-top: 50px;"></view>