一、引言
作者上一章讲了微信小程序的地图实现微信小程序(五)地图-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);}});},
4、确认定位
这个要看啦,作者是在同一个页面,只是把地图当成一个弹窗,所以只要关闭弹窗就行,变量设置到这个页面了
如果地图是另外一个页面,还要跳转的时候把数据带过去
5、效果
四、总结
定位的搜索和省市区筛选基本就这样了,后端是依赖腾讯地图的,作者在之前的文章也写了怎么引用腾讯地图,有疑问的小伙伴欢迎评论区私聊。