1:申请key:
https://lbs.qq.com/dev/console/application/mine
网址:
https://note.youdao.com/ynoteshare/index.html?id=f4bce6ad3877f203874d8cb490f73925&type=note&_time=1646188518511
2
3:
4:
5:
6:
// 引入SDK核心类,js文件根据自己业务,位置可自行放置 var QQMapWX = require('../../libs/qqmap-wx-jssdk.js'); var qqmapsdk; Page({ onl oad: function () { // 实例化API核心类 qqmapsdk = new QQMapWX({ key: '申请的key' }); }, onShow: function () { // 调用接口 qqmapsdk.search({ keyword: '酒店', success: function (res) { console.log(res); }, fail: function (res) { console.log(res); }, complete: function (res) { console.log(res); } }); } })
7:
8:
8
9:
ml:
<!-- !--输入起点和终点经纬度坐标,格式为string格式 --> <label>起点坐标: <input style="border:1px solid #000;" name="start" bindfocus="startLocation" value="{{startName}}"></input> </label> <!--多个终点位置示例:39.984060,116.307520;39.984060,116.507520--> <label>终点坐标: <input style="border:1px solid #000;" name="dest" bindfocus="endLocation" value="{{endName}}"></input> </label> <!--提交表单数据--> <button bindtap="distance">计算距离</button> <!--渲染起点经纬度到终点经纬度距离,单位为米--> <view wx:for="{{distance}}" wx:key="index"> <view>{{startName}}到{{endName}}的步行距离为{{item}}米</view> </view>
js:
// pages/map/map.js var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js'); var qqmapsdk; Page({ /** * 页面的初始数据 */ data: { imgArr: [], start: '', startName: '', end: '', endName: '' }, /** * 生命周期函数--监听页面加载 */ onl oad: function (options) { qqmapsdk = new QQMapWX({ key: 'HPMBZ-7W3KX-L5T4W-TXZFM-NXEU7-24FKQ' }); }, //在Page({})中使用下列代码 //事件触发,调用接口 distance(e) { var _this = this; //调用距离计算接口 qqmapsdk.calculateDistance({ //mode: 'driving',//可选值:'driving'(驾车)、'walking'(步行),不填默认:'walking',可不填 //from参数不填默认当前地址 //获取表单提交的经纬度并设置from和to参数(示例为string格式) from: this.data.start || '', //若起点有数据则采用起点坐标,若为空默认当前地址 to: this.data.end, //终点坐标 success: function (res) {//成功后的回调 var res = res.result; var dis = []; for (var i = 0; i < res.elements.length; i++) { dis.push(res.elements[i].distance); //将返回数据存入dis数组, } _this.setData({ //设置并更新distance数据 distance: dis }); }, fail: function (error) { console.error(error); }, complete: function (res) { console.log(res); } }); }, startLocation() { wx.getLocation({ type: 'wgs84', success: res => { const latitude = res.latitude const longitude = res.longitude wx.chooseLocation({ latitude: latitude, longitude: longitude, success: ret => { let start = ret.latitude + ',' + ret.longitude this.setData({ start: start, startName: ret.address }) } }) } }) }, endLocation() { wx.getLocation({ type: 'wgs84', success: res => { const latitude = res.latitude const longitude = res.longitude wx.chooseLocation({ latitude: latitude, longitude: longitude, success: ret => { let end = ret.latitude + ',' + ret.longitude this.setData({ end: end, endName: ret.address }) } }) } }) }, })
效果图: