功能1 查询
调用腾讯地图api即可，实现代码如下:
/**
*
* 地图的函数
*
*/
backfill: function (e) {
var id = e.currentTarget.id;
for (var i = 0; i < this.data.suggestion.length; i++) {
if (i == id) {
var mks = []
mks.push({
title: this.data.suggestion[i].title,
id: 0,
latitude: this.data.suggestion[i].latitude,
longitude: this.data.suggestion[i].longitude,
iconPath: '../images/ins.png',//图标路径
width: 20,
height: 20,
callout: { //在markers上展示地址名称，根据需求是否需要
content: this.data.suggestion[i].address,
color: '#000',
display: 'ALWAYS'
}
}),
this.setData({
cha:1,
cha1:1,
backfill: this.data.suggestion[i].title,
dingwei:mks,
poi: {
latitude: this.data.suggestion[i].latitude,
longitude: this.data.suggestion[i].longitude,
}
});
}
}
},
//触发关键词输入提示事件
getsuggest: function (e) {
var _this = this;
this.data.cha = 0;
//调用关键词提示接口
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,
cha1:0,
cha:1
});
},
fail: function (error) {
console.error(error);
},
complete: function (res) {
console.log(res);
}
});
},
代码来源位官网示例代码，添加信号量保证搜索和地图显示分离
如图
如图
功能2 路径寻找
继续去看官方api，发现官方提供了路径寻找的接口，可以返回多种多样的返回值
传送门
于是开始试着写
guihua(e) {
var that = this
this.setData({
polyline: []
})
console.log(e.currentTarget.dataset.type)
var type = e.currentTarget.dataset.id
var loclat = this.data.latitude
var loclng = this.data.longitude
var tolat = this.data.toLat
var tolng = this.data.toLng
var url = ""
if (type == 3) {
url = "https://apis.map.qq.com/ws/direction/v1/driving/"
}
if (type == 1) {
url = "https://apis.map.qq.com/ws/direction/v1/bicycling/"
}
if (type == 0) {
url = "https://apis.map.qq.com/ws/direction/v1/walking/"
}
wx.request({
url: `${url}?from=${loclat},${loclng}&to=${tolat},${tolng}&key=WFUBZ-OEVC5-手动打码`,
data: {},
method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
// header: {}, // 设置请求的 header
success: function (res) {
// success
console.log(res)
var ret = res.data
if (ret.status != 0) return; //服务异常处理
var coors = ret.result.routes[0].polyline, pl = [];
//坐标解压（返回的点串坐标，通过前向差分进行压缩）
var kr = 1000000;
for (var i = 2; i < coors.length; i++) {
coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
}
//将解压后的坐标放入点串数组pl中
for (var i = 0; i < coors.length; i += 2) {
pl.push({ latitude: coors[i], longitude: coors[i + 1] })
}
//设置polyline属性，将路线显示出来
that.setData({
polyline: [{
points: pl,
color: '#FF0000DD',
width: 2
}]
})
},
fail: function () {
// fail
},
complete: function () {
// complete
}
})
绑定函数，在map内加入polyline选项即可显示，默认颜色为红色没有找到在哪里修改
成功