效果图 :
输入关键字自动搜索地址
点击地址,大头针自动定位到位置
下面是代码
1. map.wxml
<view class='view-c'>
<view class='view-top'>
<text style="font-size: 24rpx;margin-top: 40rpx; color: #b65151">当前:{{district}}</text>
<input placeholder="输入城市" class='input-c' bindinput="getsuggest" value="{{backfill}}" />
</view>
<!-- 搜索 -->
<view wx:for="{{suggestion}}" wx:key="index" class="{{showview?'hidden':'view-center'}}">
<!--绑定回填事件-->
<view >
<!--根据需求渲染相应数据-->
<!--渲染地址title-->
<view class='item-title' bindtap="backfill" id="{{index}}">{{item.title}}</view>
<!--渲染详细地址-->
<view class='item-details'>{{item.addr}}</view>
</view>
</view>
<map
id="ofoMap"
longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}"
scale="{{scale}}"
covers="{{covers}}" show-location
class="{{showview?'map-c':'hidden'}}"
bindregionchange="bindregionchange"
controls="{{controls}}"
bindcontroltap='bindcontroltap'
>
</map>
</view>
wxss样式文件这里就不给出了,根据自己的需求定义样式
2. map.js 文件
核心类的jar包上个博客有给出
// 引入SDK核心类
var QQMapWX = require('xxx/qqmap-wx.js');
// 实例化API核心类
var qqmapsdk = new QQMapWX({
key: '开发密钥(key)' // 必填
});
//触发关键词输入提示事件
getsuggest: function (e) {
var _this = this;
//调用关键词提示接口
qqmapsdk.getSuggestion({
//获取输入框值并设置keyword参数
keyword: e.detail.value, //用户输入的关键词,可设置固定值,如keyword:'KFC'
region: '上海', //设置城市名,限制关键词所示的地域范围,非必填参数
page_size:8,
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({
showview: false
})
_this.setData({ //设置suggestion属性,将关键词搜索结果以列表形式展示
suggestion: sug
});
},
fail: function (error) {
console.error(error+"失败");
_this.setData({
showview: true
})
},
complete: function (res) {
console.log(res);
}
});
},
搜索成功后回调的方法
//方法回填
backfill: function (e) {
console.log("点击");
this.setData({
showview: true
})
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,
latitude: this.data.suggestion[i].latitude,
longitude: this.data.suggestion[i].longitude
});
this.nearby_search();
return;
}
}
},
// 根据关键词搜索附近位置
nearby_search: function () {
var self = this;
// 调用接口
qqmapsdk.search({
keyword: self.data.detail, //搜索关键词
//boundary: 'nearby(' + self.data.latitude + ', ' + self.data.longitude + ', 1000, 16)',
location: self.data.latitude + ',' + self.data.longitude,
page_size: 20,
page_index: 1,
success: function (res) { //搜索成功后的回调
//console.log(res.data)
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,
province: res.data[i].ad_info.province,
city: res.data[i].ad_info.city,
district: res.data[i].ad_info.district,
latitude: res.data[i].location.lat,
longitude: res.data[i].location.lng
});
}
self.setData({
selectedId: 0,
nearList: sug,
suggestion: sug
})
self.addMarker(sug[0]);
},
fail: function (res) {
//console.log(res);
},
complete: function (res) {
//console.log(res);
}
});
},
以上就是实现搜索功能的核心代码