devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：知新_RL | 2024-07-16 03:54:49

赞

踩

微信小程序 搜索功能

一、引言

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

二、定位搜索实现

1、位置搜索样式

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

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

  1. <view class="top">
  2.                 <view class="back iconfont icon-fanhui" bindtap="back1"></view>
  3.                 <view class="search-box {{addListShow?'search-box1':''}}">
  4.                     <view class="region" bindtap="chooseCity">{{currentRegion.district}}</view>
  5.                     <view class="shu"></view>
  6.                     <input class="input-box" bindinput="getsuggest" placeholder="请输入目标位置"></input>
  7.                 </view>
  8.             </view>
  9.             <!--关键词输入提示列表渲染-->
  10.             <view class="add-list-box">
  11.                 <scroll-view class="add-list" scroll-y>
  12.                     <view class="add-item" wx:for="{{suggestion}}" wx:key="index">
  13.                         <!--绑定回填事件-->
  14.                         <view bindtap="backfill" id="{{index}}" data-name="{{item.title}}">
  15.                             <!--根据需求渲染相应数据-->
  16.                             <!--渲染地址title-->
  17.                             <view class="title">{{item.title}}</view>
  18.                             <!--渲染详细地址-->
  19.                             <view class="add">{{item.addr}}</view>
  20.                         </view>
  21.                     </view>
  22.                 </scroll-view>

2、拖动地图

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

  1. <cover-view class="top">
  2.                     <cover-view class="back" bindtap="back1">
  3.                         <cover-image src="/static/images/detail_back.png"></cover-image>
  4.                     </cover-view>
  5.                     <cover-view class="search-box">
  6.                         <cover-view class="region" bindtap="chooseCity">{{currentRegion.district}}</cover-view>
  7.                         <cover-view class="shu"></cover-view>
  8.                         <cover-view class="placeholder" bindtap="showAddList">请输入地址</cover-view>
  9.                     </cover-view>
  10.                 </cover-view>
  11.                 <cover-view class="map-prompt">您可拖动地图, 标记准确位置</cover-view>
  12.                 <cover-image class="current-site-icon" src="/static/images/my_marker.png"></cover-image>
  13.                 <cover-view class="reload" bindtap="reload">
  14.                     <cover-view class="center1">
  15.                         <cover-view class="center2"></cover-view>
  16.                     </cover-view>
  17.                 </cover-view>

3、附近位置样式

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

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

4、搜索附近位置

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

  1. getsuggest: function (e) {
  2.         var _this = this;
  3.         var keyword = e.detail.value;
  4.         _this.setData({
  5.             addListShow: true
  6.         })
  7.         //调用关键词提示接口
  8.         qqmapsdk.getSuggestion({
  9.             //获取输入框值并设置keyword参数
  10.             keyword: keyword, //用户输入的关键词，可设置固定值,如keyword:'KFC'
  11.             location: _this.data.latitude + ',' + _this.data.longitude,
  12.             page_size: 20,
  13.             page_index: 1,
  14.             //region:'北京', //设置城市名，限制关键词所示的地域范围，非必填参数
  15.             success: function (res) {//搜索成功后的回调
  16.                 //console.log(res);
  17.                 var sug = [];
  18.                 for (var i = 0; i < res.data.length; i++) {
  19.                     sug.push({ // 获取返回结果，放到sug数组中
  20.                         title: res.data[i].title,
  21.                         id: res.data[i].id,
  22.                         addr: res.data[i].address,
  23.                         province: res.data[i].province,
  24.                         city: res.data[i].city,
  25.                         district: res.data[i].district,
  26.                         latitude: res.data[i].location.lat,
  27.                         longitude: res.data[i].location.lng
  28.                     });
  29.                 }
  30.                 _this.setData({ //设置suggestion属性，将关键词搜索结果以列表形式展示
  31.                     suggestion: sug,
  32.                     nearList: sug,
  33.                     keyword: keyword
  34.                 });
  35.             },
  36.             fail: function (error) {
  37.                 //console.error(error);
  38.             },
  39.             complete: function (res) {
  40.                 //console.log(res);
  41.             }
  42.         });
  43.     },
  1. nearby_search: function () {
  2.         var self = this;
  3.         wx.hideLoading();
  4.         wx.showLoading({
  5.             title: '加载中'
  6.         });
  7.         // 调用接口
  8.         qqmapsdk.search({
  9.             keyword: self.data.keyword,
  10.             location: self.data.latitude + ',' + self.data.longitude,
  11.             page_size: 20,
  12.             page_index: 1,
  13.             success: function (res) { //搜索成功后的回调
  14.                 //console.log(res.data)
  15.                 var sug = [];
  16.                 for (var i = 0; i < res.data.length; i++) {
  17.                     sug.push({ // 获取返回结果，放到sug数组中
  18.                         title: res.data[i].title,
  19.                         id: res.data[i].id,
  20.                         addr: res.data[i].address,
  21.                         province: res.data[i].ad_info.province,
  22.                         city: res.data[i].ad_info.city,
  23.                         district: res.data[i].ad_info.district,
  24.                         latitude: res.data[i].location.lat,
  25.                         longitude: res.data[i].location.lng
  26.                     });
  27.                 }
  28.                 self.setData({
  29.                     selectedId: 0,
  30.                     centerData: sug[0],
  31.                     nearList: sug,
  32.                     suggestion: sug
  33.                 })
  34.                 self.addMarker(sug[0]);
  35.             },
  36.             fail: function (res) {
  37.                 //console.log(res);
  38.             },
  39.             complete: function (res) {
  40.                 //console.log(res);
  41.             }
  42.         });
  43.     },

5、地图拖动

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

  1. mapChange: function (e) {
  2.         let self = this;
  3.         if (e.type == 'end' && (e.causedBy == 'scale' || e.causedBy == 'drag')) {
  4.             self.mapCtx.getCenterLocation({
  5.                 success: function (res) {
  6.                     //console.log(res)
  7.                     self.setData({
  8.                         nearList: [],
  9.                         latitude: res.latitude,
  10.                         longitude: res.longitude,
  11.                     })
  12.                     self.nearby_search();
  13.                 }
  14.             })
  15.         }
  16.  
  17.     },

6、标记地图定位

  1. addMarker: function (data) {
  2.         //console.log(data)
  3.         //console.log(data.title)
  4.         var mks = [];
  5.         mks.push({ // 获取返回结果，放到mks数组中
  6.             title: data.title,
  7.             id: data.id,
  8.             addr: data.addr,
  9.             province: data.province,
  10.             city: data.city,
  11.             district: data.district,
  12.             latitude: data.latitude,
  13.             longitude: data.longitude,
  14.             iconPath: "/images/my_marker.png", //图标路径
  15.             width: 25,
  16.             height: 25
  17.         })
  18.         this.setData({ //设置markers属性，将搜索结果显示在地图中
  19.             markers: mks,
  20.             currentRegion: {
  21.                 province: data.province,
  22.                 city: data.city,
  23.                 district: data.district,
  24.             }
  25.         })
  26.         wx.hideLoading({});
  27.     },

7、效果

三、选择省市区实现

1、选择省市区样式

  1. <view class="region-top">
  2.                     <view class="region-back iconfont icon-fanhui" bindtap="back2"></view>
  3.                     <view class="title">选择城市</view>
  4.                 </view>
  5.                 <view class="region-tabs">
  6.                     <text class="tab" bindtap="showProvince">{{currentProvince}}</text>
  7.                     <text class="tab" bindtap="showCity" >{{currentCity}}</text>
  8.                     <text class="tab" bindtap="showDistrict" >{{currentDistrict}}</text>
  9.                 </view>
  10.                 <scroll-view scroll-y style="height:1050rpx;">
  11.                     <view class="region-list" wx:if="{{regionShow.province}}">
  12.                         <view class="region-item" wx:for="{{regionData.province}}" wx:key="index">
  13.                             <view data-id="{{item.id}}" data-name="{{item.fullname}}" bindtap="selectProvince">
  14.                                 <text>{{item.fullname}}</text>
  15.                             </view>
  16.                         </view>
  17.                     </view>
  18.                     <view class="region-list" wx:if="{{regionShow.city}}">
  19.                         <view class="region-item" wx:for="{{regionData.city}}" wx:key="index">
  20.                             <view data-id="{{item.id}}" data-name="{{item.fullname}}" bindtap="selectCity">
  21.                                 <text>{{item.fullname}}</text>
  22.                             </view>
  23.                         </view>
  24.                     </view>
  25.                     <view class="region-list" wx:if="{{regionShow.district}}">
  26.                         <view class="region-item" wx:for="{{regionData.district}}" wx:key="index">
  27.                             <view data-id="{{item.id}}" data-name="{{item.fullname}}"
  28.                                   data-latitude="{{item.location.lat}}" data-longitude="{{item.location.lng}}"
  29.                                   bindtap="selectDistrict">
  30.                                 <text>{{item.fullname}}</text>
  31.                             </view>
  32.                         </view>
  33.                     </view>

2、省市区缓存

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

  1. getRegionData: function () {
  2.         let self = this;
  3.         console.log('调用获取城市列表接口')
  4.         //调用获取城市列表接口
  5.         qqmapsdk.getCityList({
  6.             success: function (res) {//成功后的回调
  7.                 console.log(res)
  8.                 let provinceArr = res.result[0];
  9.                 let cityArr = [];
  10.                 let districtArr = [];
  11.                 for (var i = 0; i < provinceArr.length; i++) {
  12.                     var name = provinceArr[i].fullname;
  13.                     if (self.data.currentRegion.province == name) {
  14.                         // if (name == '北京市' || name == '天津市' || name == '上海市' || name == '重庆市') {
  15.                         //     cityArr.push(provinceArr[i])
  16.                         // } else {
  17.                         qqmapsdk.getDistrictByCityId({
  18.                             // 传入对应省份ID获得城市数据，传入城市ID获得区县数据,依次类推
  19.                             id: provinceArr[i].id,
  20.                             success: function (res) {//成功后的回调
  21.                                 //console.log(res);
  22.                                 cityArr = res.result[0];
  23.                                 console.log('setData');
  24.                                 self.setData({
  25.                                     regionData: {
  26.                                         province: provinceArr,
  27.                                         city: cityArr,
  28.                                         district: districtArr
  29.                                     }
  30.                                 })
  31.                             },
  32.                             fail: function (error) {
  33.                                 console.error(error);
  34.                             },
  35.                             complete: function (res) {
  36.                                 console.log(res);
  37.                             }
  38.                         });
  39.                     }
  40.                     // }
  41.                 }
  42.                 console.log('now res:{}', res);
  43.                 console.log('self.data.currentRegion:{}', JSON.stringify(self.data.currentRegion));
  44.                 
  45.             },
  46.             fail: function (error) {
  47.                 console.error(error);
  48.             },
  49.             complete: function (res) {
  50.                 console.log(res);
  51.             }
  52.         });
  53.     },

3、打开省市区页面

        

  1. chooseCity: function () {
  2.         let self = this;
  3.         self.getRegionData();
  4.         self.setData({
  5.             chooseCity: true,
  6.             regionShow: {
  7.                 province: true,
  8.                 city: false,
  9.                 district: false
  10.             },
  11.             currentProvince: self.data.currentRegion.province,
  12.             currentCity: self.data.currentRegion.city,
  13.             currentDistrict: self.data.currentRegion.district,
  14.         })
  15.     },

4、选择省市区

  1. showProvince: function () {
  2.         console.log('showProvince')
  3.         console.log(this.data.regionData.province)
  4.         this.setData({
  5.             regionShow: {
  6.                 province: true,
  7.                 city: false,
  8.                 district: false
  9.             }
  10.         })
  11.     },
  12.     //选择城市
  13.     showCity: function () {
  14.         this.setData({
  15.             regionShow: {
  16.                 province: false,
  17.                 city: true,
  18.                 district: false
  19.             }
  20.         })
  21.     },
  22.     //选择地区
  23.     showDistrict: function () {
  24.         this.setData({
  25.             regionShow: {
  26.                 province: false,
  27.                 city: false,
  28.                 district: true
  29.             }
  30.         })
  31.     },
  32.  
  33. selectProvince: function (e) {
  34.         //console.log(e)
  35.         let self = this;
  36.         let id = e.currentTarget.dataset.id;
  37.         let name = e.currentTarget.dataset.name;
  38.         self.setData({
  39.             currentProvince: name,
  40.             currentCity: '请选择城市',
  41.         })
  42.         if (name == '北京市' || name == '天津市' || name == '上海市' || name == '重庆市') {
  43.             var provinceArr = self.data.regionData.province;
  44.             var cityArr = [];
  45.             for (var i = 0; i < provinceArr.length; i++) {
  46.                 if (provinceArr[i].fullname == name) {
  47.                     cityArr.push(provinceArr[i])
  48.                     self.setData({
  49.                         regionData: {
  50.                             province: self.data.regionData.province,
  51.                             city: cityArr,
  52.                             district: self.data.regionData.district
  53.                         }
  54.                     })
  55.                     self.showCity();
  56.                     return;
  57.                 }
  58.             }
  59.         } else {
  60.             let bj = self.data.regionShow;
  61.             self.getById(id, name, bj)
  62.         }
  63.     },
  64.     //选择城市之后操作
  65.     selectCity: function (e) {
  66.         let self = this;
  67.         let id = e.currentTarget.dataset.id;
  68.         let name = e.currentTarget.dataset.name;
  69.         self.setData({
  70.             currentCity: name,
  71.             currentDistrict: '请选择城市',
  72.         })
  73.         let bj = self.data.regionShow;
  74.         self.getById(id, name, bj)
  75.     },
  76.     //选择区县之后操作
  77.     selectDistrict: function (e) {
  78.         let self = this;
  79.         let id = e.currentTarget.dataset.id;
  80.         let name = e.currentTarget.dataset.name;
  81.         let latitude = e.currentTarget.dataset.latitude;
  82.         let longitude = e.currentTarget.dataset.longitude;
  83.         self.setData({
  84.             currentDistrict: name,
  85.             latitude: latitude,
  86.             longitude: longitude,
  87.             currentRegion: {
  88.                 province: self.data.currentProvince,
  89.                 city: self.data.currentCity,
  90.                 district: name
  91.             },
  92.             chooseCity: false,
  93.             keyword: self.data.defaultKeyword
  94.         })
  95.         self.nearby_search();
  96.     },
  97.     //根据选择省市加载市区列表
  98.     getById: function (id, name, bj) {
  99.         let self = this;
  100.         qqmapsdk.getDistrictByCityId({
  101.             // 传入对应省份ID获得城市数据，传入城市ID获得区县数据,依次类推
  102.             id: id, //对应接口getCityList返回数据的Id，如：北京是'110000'
  103.             success: function (res) {//成功后的回调
  104.                 //console.log(res);
  105.                 if (bj.province) {
  106.                     self.setData({
  107.                         regionData: {
  108.                             province: self.data.regionData.province,
  109.                             city: res.result[0],
  110.                             district: self.data.regionData.district
  111.                         }
  112.                     })
  113.                     self.showCity();
  114.                 } else if (bj.city) {
  115.                     self.setData({
  116.                         regionData: {
  117.                             province: self.data.regionData.province,
  118.                             city: self.data.regionData.city,
  119.                             district: res.result[0]
  120.                         }
  121.                     })
  122.                     self.showDistrict();
  123.                 } else {
  124.                     self.setData({
  125.                         chooseCity: false,
  126.                     })
  127.                 }
  128.             },
  129.             fail: function (error) {
  130.                 //console.error(error);
  131.             },
  132.             complete: function (res) {
  133.                 //console.log(res);
  134.             }
  135.         });
  136.     },

4、确认定位

        这个要看啦，作者是在同一个页面，只是把地图当成一个弹窗，所以只要关闭弹窗就行，变量设置到这个页面了

        如果地图是另外一个页面，还要跳转的时候把数据带过去

5、效果

 四、总结

        定位的搜索和省市区筛选基本就这样了，后端是依赖腾讯地图的，作者在之前的文章也写了怎么引用腾讯地图，有疑问的小伙伴欢迎评论区私聊。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/832196
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号