腾讯地图下载
放入
wxml页面
<button bindtap="access">获取位置</button>
<!--form表单-->
<form bindsubmit="formSubmit">
<label>终点坐标:
<input style="border:1px solid #000;" name="dest"></input>
</label>
<!--提交表单数据-->
<button form-type="submit">计算距离</button>
</form>
<!--渲染起点经纬度到终点经纬度距离,单位为米-->
<view wx:for="{{distance}}" wx:key="index">
<view>起点到终点的步行距离为{{item}}米</view>
</view>
<map id="myMap"
markers="{{markers}}"
style="width:100%;height:300px;"
longitude="{{poi.longitude}}"
latitude="{{poi.latitude}}" scale='16' show-location>
</map>
js
// pages/word/word.js
var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
// 实例化API核心类
var qqmapsdk = new QQMapWX({
key: '自己的key' // 必填
});
Page({
/**
* 页面的初始数据
*/
data: {
res:'',
},
access(){
var _this=this;
wx.getLocation({
type: 'wgs84',
success (res) {
const latitude = res.latitude
const longitude = res.longitude
qqmapsdk.reverseGeocoder({
location: {
latitude: latitude,
longitude: longitude
},
success: function(res) {//成功后的回调
console.log(res);
var res = res.result;
var mks = [];
mks.push({ // 获取返回结果,放到mks数组中
title: res.address,
id: 0,
latitude: res.location.lat,
longitude: res.location.lng,
iconPath: '',//图标路径
width: 20,
height: 20,
callout: { //在markers上展示地址名称,根据需求是否需要
content: res.address,
color: '#000',
display: 'ALWAYS'
}
});
_this.setData({ //设置markers属性和地图位置poi,将结果在地图展示
markers: mks,
poi: {
latitude: res.location.lat,
longitude: res.location.lng
},
res:res.ad_info.city
});
},
})
},
})
},
formSubmit(e) {
console.log(e);
var _this = this;
qqmapsdk.geocoder({
address: e.detail.value.dest, //传入地址( address: '北京故宫', )
success: function (res) {
console.log(res);
var path = res.result.location; //接口调用成功,取得地址坐标!!
var strLocation = path.lat + ',' + path.lng;
//调用距离计算接口
qqmapsdk.calculateDistance({
//mode: 'driving',//可选值:'driving'(驾车)、'walking'(步行),不填默认:'walking',可不填
mode:'walking',
//from参数不填默认当前地址
//获取表单提交的经纬度并设置from和to参数(示例为string格式)
from: '', //若起点有数据则采用起点坐标,若为空默认当前地址
to: strLocation, //终点坐标
success: function (res) { //成功后的回调
console.log(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);
}
});
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})