1、主要运用到wx.getLocation和wx.chooseLocation,想要个性化或不需要地图,只显示周边可以使用腾讯地图官方文档提供的开放性接口,动态显示周边地址。
data: {
my_latitude:"",
my_longitude:"",
chooseAddress:"",
},
//以当前位置为中心打开腾讯地图
chooseAddressFn(){
let that=this
wx.chooseLocation({
latitude: that.data.latitude,
longitude: that.data.longitude,
success(e){
console.log(e)
that.setData({
chooseAddress:e.address+e.name, 具体详细信息需另外填写(门牌号等)
my_latitude: e.latitude,
my_longitude: e.longitude,
});
}
})
},
//获取当前位置信息,获得lat,lng国测局坐标系
getMyLocation(){
wx.getLocation({
type: 'gcj02',
isHighAccuracy:true,//高精度
success (res) {
that.setData({
my_latitude:res.latitude,
my_longitude:res.longitude
})
const speed = res.speed
const accuracy = res.accuracy
qqmapsdk = new QQMapWX({
key: '腾讯地图服务密钥'
});
//根据经纬度逆解析成地址
qqmapsdk.reverseGeocoder({
location: {
latitude: res.latitude,
longitude: res.longitude
},
success: function (res) {
console.log(res);
var add = res.result.address;
that.setData({
chooseAddress: add //具体详细信息需另外填写(门牌号等)
})
},
fail: function (res) {
console.log(res);
},
})
}
})
}
2、根据输入关键词所呈现的周边地址信息,动态拉取并选择
<!--绑定输入事件-->
<input style="border:1px solid black;" bindinput="getsuggest" value="{{backfill}}"></input>
<!--关键词输入提示列表渲染-->
<view wx:for="{{suggestion}}" wx:key="index">
<!--绑定回填事件-->
<view>
<!--根据需求渲染相应数据-->
<!--渲染地址title-->
<view style="text-align:center;" bindtap="backfill" id="{{index}}">{{item.title}}</view>
<!--渲染详细地址-->
<view style="font-size:12px;color:#666;text-align:center;">{{item.addr}}</view>
</view>
</view>
// 引入SDK核心类
var QQMapWX = require('xxx/qqmap-wx.js');
// 实例化API核心类
var qqmapsdk = new QQMapWX({
key: '开发密钥(key)' // 必填
});
//在Page({})中使用下列代码
//数据回填方法
backfill: function (e) {
var id = e.currentTarget.id;
for (var i = 0; i < this.data.suggestion.length;i++){
if(i == id){
this.setData({
backfill: this.data.suggestion[i].title
});
}
}
},
//触发关键词输入提示事件
getsuggest: function(e) {
var _this = this;
//调用关键词提示接口
qqmapsdk.getSuggestion({
//获取输入框值并设置keyword参数
keyword: e.detail.value, //用户输入的关键词,可设置固定值,如keyword:'KFC'
//region:'北京', //设置城市名,限制关键词所示的地域范围,非必填参数
success: function(res) {//搜索成功后的回调
console.log(res);
var sug = [];
for (var i = 0; i < res.data.length; i++) {
sug.push({ // 获取返回结果,放到sug数组中
title: res.data[i].title,
id: res.data[i].id,
addr: res.data[i].address,
city: res.data[i].city,
district: res.data[i].district,
latitude: res.data[i].location.lat,
longitude: res.data[i].location.lng
});
}
_this.setData({ //设置suggestion属性,将关键词搜索结果以列表形式展示
suggestion: sug
});
},
fail: function(error) {
console.error(error);
},
complete: function(res) {
console.log(res);
}
});
}
3、距离计算,根据from的经纬度提供多种路线(步行、驾车)至to的距离,可做多家门店位置选择。
/**
* 页面的初始数据
*/
data: {
addrList: [],//可从数据库通过api获取位置lat,lng列表
distanceList: [] //获得每个地址到from位置的距离
},
//事件触发,调用接口
calcDistanceFn(e){
var _this = this, list=_this.data.addrList, latlng_list=[];
for(var i in list){
latlng_list.push({"latitude":list[i].lat, "longitude":list[i].lng});
}
console.log(latlng_list)
qqmapsdk = new QQMapWX({
key: '腾讯地图服务密钥'
});
//调用距离计算接口
qqmapsdk.calculateDistance({
mode: 'walking',//可选值:'driving'(驾车)、'walking'(步行),不填默认:'walking',可不填
//from参数不填默认当前地址
//获取表单提交的经纬度并设置from和to参数(示例为string格式)
//若起点有数据则采用起点坐标,若为空默认当前地址
from: {
latitude: xxx,
longitude: xxx
}, //若起点有数据则采用起点坐标,若为空默认当前地址
//收货人地址经纬度坐标,数据库从存储获得
to: latlng_list, //终点坐标,可以为数组
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/1000).toFixed(2)); //将返回数据存入dis数组,显示单位km,默认为m
}
_this.setData({ //设置并更新distance数据
distanceList: dis
});
},
fail: function(error) {
console.error(error);
},
complete: function(res) {
console.log(res);
}
});
},