微信小程序（六）定位搜索

一、引言

作者上一章讲了微信小程序的地图实现微信小程序（五）地图-CSDN博客，但是还有一个功能是和地图紧密结合的，那就是位置搜索定位，这里作者讲讲实现和原理，包括城市筛选。

二、定位搜索实现

1、位置搜索样式

这个其实就是样式啦，不是固定要和作者一样的

上面一个搜索框，下面展示搜索到的相关位置

<view class="top"><view class="back iconfont icon-fanhui" bindtap="back1"></view><view class="search-box {{addListShow?'search-box1':''}}"><view class="region" bindtap="chooseCity">{{currentRegion.district}}</view><view class="shu"></view><input class="input-box" bindinput="getsuggest" placeholder="请输入目标位置"></input></view></view><!--关键词输入提示列表渲染--><view class="add-list-box"><scroll-view class="add-list" scroll-y><view class="add-item" wx:for="{{suggestion}}" wx:key="index"><!--绑定回填事件--><view bindtap="backfill" id="{{index}}" data-name="{{item.title}}"><!--根据需求渲染相应数据--><!--渲染地址title--><view class="title">{{item.title}}</view><!--渲染详细地址--><view class="add">{{item.addr}}</view></view></view></scroll-view>

2、拖动地图

随着地图拖拽，显示的附近位置也会改变

<cover-view class="top"><cover-view class="back" bindtap="back1"><cover-image src="/static/images/detail_back.png"></cover-image></cover-view><cover-view class="search-box"><cover-view class="region" bindtap="chooseCity">{{currentRegion.district}}</cover-view><cover-view class="shu"></cover-view><cover-view class="placeholder" bindtap="showAddList">请输入地址</cover-view></cover-view></cover-view><cover-view class="map-prompt">您可拖动地图, 标记准确位置</cover-view><cover-image class="current-site-icon" src="/static/images/my_marker.png"></cover-image><cover-view class="reload" bindtap="reload"><cover-view class="center1"><cover-view class="center2"></cover-view></cover-view></cover-view>

3、附近位置样式

这里展示附近的位置，最终选定之后可以点击位置确认

<scroll-view class="near-list" scroll-y><!--绑定回填事件--><view class="near-item" wx:for="{{nearList}}" wx:key="index"><view class="current-site iconfont icon-location" wx:if="{{index == selectedId }}"></view><!--根据需求渲染相应数据--><view bindtap="chooseCenter" id="{{index}}" data-name="{{item.title}}"><!--渲染地址title--><view class="title {{ index == selectedId?'title1':'' }}">{{item.title}}</view><!--渲染详细地址--><view class="add {{ index == selectedId?'add1':'' }}">{{item.addr}}</view></view></view></scroll-view><view class="bottom-box"><button bindtap="selectedOk">确认定位</button></view>

4、搜索附近位置

是根据选中的位置的经纬度进行搜索的，后端数据在腾讯地图

getsuggest: function (e) {var _this = this;var keyword = e.detail.value;_this.setData({addListShow: true})//调用关键词提示接口qqmapsdk.getSuggestion({//获取输入框值并设置keyword参数keyword: keyword, //用户输入的关键词，可设置固定值,如keyword:'KFC'location: _this.data.latitude + ',' + _this.data.longitude,page_size: 20,page_index: 1,//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,province: res.data[i].province,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,nearList: sug,keyword: keyword});},fail: function (error) {//console.error(error);},complete: function (res) {//console.log(res);}});},

nearby_search: function () {var self = this;wx.hideLoading();wx.showLoading({title: '加载中'});// 调用接口qqmapsdk.search({keyword: self.data.keyword,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,centerData: sug[0],nearList: sug,suggestion: sug})self.addMarker(sug[0]);},fail: function (res) {//console.log(res);},complete: function (res) {//console.log(res);}});},

5、地图拖动

根据拖动到的经纬度再次进行搜索

mapChange: function (e) {let self = this;if (e.type == 'end' && (e.causedBy == 'scale' || e.causedBy == 'drag')) {self.mapCtx.getCenterLocation({success: function (res) {//console.log(res)self.setData({nearList: [],latitude: res.latitude,longitude: res.longitude,})self.nearby_search();}})}},

6、标记地图定位

addMarker: function (data) {//console.log(data)//console.log(data.title)var mks = [];mks.push({ // 获取返回结果，放到mks数组中title: data.title,id: data.id,addr: data.addr,province: data.province,city: data.city,district: data.district,latitude: data.latitude,longitude: data.longitude,iconPath: "/images/my_marker.png", //图标路径width: 25,height: 25})this.setData({ //设置markers属性，将搜索结果显示在地图中markers: mks,currentRegion: {province: data.province,city: data.city,district: data.district,}})wx.hideLoading({});},

7、效果

三、选择省市区实现

1、选择省市区样式

<view class="region-top"><view class="region-back iconfont icon-fanhui" bindtap="back2"></view><view class="title">选择城市</view></view><view class="region-tabs"><text class="tab" bindtap="showProvince">{{currentProvince}}</text><text class="tab" bindtap="showCity" >{{currentCity}}</text><text class="tab" bindtap="showDistrict" >{{currentDistrict}}</text></view><scroll-view scroll-y style="height:1050rpx;"><view class="region-list" wx:if="{{regionShow.province}}"><view class="region-item" wx:for="{{regionData.province}}" wx:key="index"><view data-id="{{item.id}}" data-name="{{item.fullname}}" bindtap="selectProvince"><text>{{item.fullname}}</text></view></view></view><view class="region-list" wx:if="{{regionShow.city}}"><view class="region-item" wx:for="{{regionData.city}}" wx:key="index"><view data-id="{{item.id}}" data-name="{{item.fullname}}" bindtap="selectCity"><text>{{item.fullname}}</text></view></view></view><view class="region-list" wx:if="{{regionShow.district}}"><view class="region-item" wx:for="{{regionData.district}}" wx:key="index"><view data-id="{{item.id}}" data-name="{{item.fullname}}"data-latitude="{{item.location.lat}}" data-longitude="{{item.location.lng}}"bindtap="selectDistrict"><text>{{item.fullname}}</text></view></view></view>

2、省市区缓存

省市区相当于先是几个层级的筛选，所以得先从地图查一下进行级联缓存，不然每次调用地图卡死了，用户体验会很差

getRegionData: function () {let self = this;console.log('调用获取城市列表接口')//调用获取城市列表接口qqmapsdk.getCityList({success: function (res) {//成功后的回调console.log(res)let provinceArr = res.result[0];let cityArr = [];let districtArr = [];for (var i = 0; i < provinceArr.length; i++) {var name = provinceArr[i].fullname;if (self.data.currentRegion.province == name) {// if (name == '北京市' || name == '天津市' || name == '上海市' || name == '重庆市') {//     cityArr.push(provinceArr[i])// } else {qqmapsdk.getDistrictByCityId({// 传入对应省份ID获得城市数据，传入城市ID获得区县数据,依次类推id: provinceArr[i].id,success: function (res) {//成功后的回调//console.log(res);cityArr = res.result[0];console.log('setData');self.setData({regionData: {province: provinceArr,city: cityArr,district: districtArr}})},fail: function (error) {console.error(error);},complete: function (res) {console.log(res);}});}// }}console.log('now res:{}', res);console.log('self.data.currentRegion:{}', JSON.stringify(self.data.currentRegion));},fail: function (error) {console.error(error);},complete: function (res) {console.log(res);}});},

3、打开省市区页面

chooseCity: function () {let self = this;self.getRegionData();self.setData({chooseCity: true,regionShow: {province: true,city: false,district: false},currentProvince: self.data.currentRegion.province,currentCity: self.data.currentRegion.city,currentDistrict: self.data.currentRegion.district,})},

4、选择省市区

showProvince: function () {console.log('showProvince')console.log(this.data.regionData.province)this.setData({regionShow: {province: true,city: false,district: false}})},//选择城市showCity: function () {this.setData({regionShow: {province: false,city: true,district: false}})},//选择地区showDistrict: function () {this.setData({regionShow: {province: false,city: false,district: true}})},selectProvince: function (e) {//console.log(e)let self = this;let id = e.currentTarget.dataset.id;let name = e.currentTarget.dataset.name;self.setData({currentProvince: name,currentCity: '请选择城市',})if (name == '北京市' || name == '天津市' || name == '上海市' || name == '重庆市') {var provinceArr = self.data.regionData.province;var cityArr = [];for (var i = 0; i < provinceArr.length; i++) {if (provinceArr[i].fullname == name) {cityArr.push(provinceArr[i])self.setData({regionData: {province: self.data.regionData.province,city: cityArr,district: self.data.regionData.district}})self.showCity();return;}}} else {let bj = self.data.regionShow;self.getById(id, name, bj)}},//选择城市之后操作selectCity: function (e) {let self = this;let id = e.currentTarget.dataset.id;let name = e.currentTarget.dataset.name;self.setData({currentCity: name,currentDistrict: '请选择城市',})let bj = self.data.regionShow;self.getById(id, name, bj)},//选择区县之后操作selectDistrict: function (e) {let self = this;let id = e.currentTarget.dataset.id;let name = e.currentTarget.dataset.name;let latitude = e.currentTarget.dataset.latitude;let longitude = e.currentTarget.dataset.longitude;self.setData({currentDistrict: name,latitude: latitude,longitude: longitude,currentRegion: {province: self.data.currentProvince,city: self.data.currentCity,district: name},chooseCity: false,keyword: self.data.defaultKeyword})self.nearby_search();},//根据选择省市加载市区列表getById: function (id, name, bj) {let self = this;qqmapsdk.getDistrictByCityId({// 传入对应省份ID获得城市数据，传入城市ID获得区县数据,依次类推id: id, //对应接口getCityList返回数据的Id，如：北京是'110000'success: function (res) {//成功后的回调//console.log(res);if (bj.province) {self.setData({regionData: {province: self.data.regionData.province,city: res.result[0],district: self.data.regionData.district}})self.showCity();} else if (bj.city) {self.setData({regionData: {province: self.data.regionData.province,city: self.data.regionData.city,district: res.result[0]}})self.showDistrict();} else {self.setData({chooseCity: false,})}},fail: function (error) {//console.error(error);},complete: function (res) {//console.log(res);}});},