微信小程序(六)定位搜索

一、引言

        作者上一章讲了微信小程序的地图实现微信小程序(五)地图-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、效果

 四、总结

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/811811.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何选择适用于Mac的文件恢复软件?适用于 Mac 的最佳数据恢复软件清单

有人会说&#xff0c;我们的数字生活正变得几乎和我们的物理生活一样重要。我们在线工作&#xff0c;将记忆保存在数码照片库中&#xff0c;在信使中交流&#xff0c;并保留各种文档的数字扫描。 每个人都知道备份是必不可少的。建议每天至少同步一个数字备份&#xff08;例如…

Day23_学点儿IDEA_单元测试@Test在新module项目中失效、Jackson核心对象 ObjectMapper识别不到

版本 IntelliJ IDEA 2023.2.4 目录结构 Study(Project) ├──JavaSE(Module) │ └──xxxx └──JavaWeb(Module)└──xxxx问题 1.1 在JavaSE项目中正常可以用的单元测试Test&#xff0c;到了JavaWeb项目中不起作用了 1.2 解决方法 如果是新创建的项目&#xff0c;先…

物联网全栈智能应用实训系统

物联网全栈智能应用实训系统是一款集硬件、软件、网络、数据分析与应用开发于一体的综合性实训平台。它旨在帮助学习者全面掌握物联网技术的各个环节&#xff0c;从硬件设备选型、通信协议理解、软件开发、数据分析到应用部署&#xff0c;都能得到充分的实践锻炼。 一、产品构…

Jenkins+AWS CodeCommit(git)

问题 需要使用Jenkins搭建一套CI流&#xff0c;即通过git代码托管拉取代码&#xff0c;构建自定分支的代码&#xff0c;构建出jar&#xff0c;并进一步构建出docker镜像&#xff0c;并推送到docker私有库中。 准备 AWS云准备 这里假设已经在CodeCommit已经存在私有git代码仓…

Comparablae接口

在日常生经常涉及到排序的的问题&#xff0c;排序问题中又不得不涉及到比较的问题。在排序问题中根据不同的规则对多个对象进行比较&#xff0c;然后根据比较内容的不同对对象进行排序。java中的Comparable就是用来定义排序规则的接口。当要对类中的对象进行排序操作时&#xf…

View-Consistent 3D Editing with Gaussian Splatting

View-Consistent 3D Editing with Gaussian Splatting 使用高斯溅射进行视图一致的3D编辑 Yuxuan Wang 王宇轩11Xuanyu Yi 易轩宇11Zike Wu 吴子可11Na Zhao 赵娜22Long Chen 龙宸33Hanwang Zhang 张汉旺1144 Abstract 摘要 View-Consistent 3D Editing with Gaussian Sp…

Zookeeper与Kafka消息队列

目录 一、Zookeeper 1、zookeeper简介 2、zookeeper的特点 3、zookeeper的工作模式跟工作机制 3.1 工作模式&#xff1a; 3.2工作机制&#xff1a;​编辑 4、zookeeper应用场景及选举机制 4.1 应用场景&#xff1a; 4.2 选举机制&#xff1a; 4.2.1第一次启动选举机制…

每日Bug汇总--Day05

Bug汇总—Day05 一、项目运行报错 二、项目运行Bug 1、**问题描述&#xff1a;**前端将从后台查询的数据作为参数进行get请求&#xff0c;参数为空 原因分析&#xff1a; 这种写法可能只支全局的参数调用方法的传参响应 代码实现 if (this.jishiName) {this.$http({url…

JAVA集合ArrayList

目录 ArrayList概述 add(element) 用法 add(index, element)用法 remove&#xff08;element&#xff09;用法 remove&#xff08;index&#xff09;用法 get(index)用法 set(index,element) 练习 test1 定义一个集合&#xff0c;添加字符串&#xff0c;并进行遍历&…

HarmonyOS实战开发-音视频录制、如何实现音频录制和视频录制功能的应用

介绍 音视频录制应用是基于AVRecorder接口开发的实现音频录制和视频录制功能的应用&#xff0c;音视频录制的主要工作是捕获音频信号&#xff0c;接收视频信号&#xff0c;完成音视频编码并保存到文件中&#xff0c;帮助开发者轻松实现音视频录制功能&#xff0c;包括开始录制…

启动Unity发布的exe并且添加启动参数

启动Unity发布的exe并且添加启动参数 在启动Unity的时候添加一些启动的参数。 代码解释 在启动的时候获取的启动参数如果没有获取到正确的启动参数那么就退出程序&#xff0c;这个代码仅仅在发布到windows之后才会生效&#xff0c;在编辑器下这个代码虽然会获取到参数但是不能…

【YOLOv9改进[损失函数]】使用MPDIou回归损失函数帮助YOLOv9模型更优秀

本文中&#xff0c;第一部分概述了各种回归损失函数&#xff0c;当然也包括了今天的主角MPDIou。第二部分内容为在YOLOv9中使用MPDIou回归损失函数的方法。 1 回归损失函数&#xff08;Bounding Box Regression Loss&#xff09; 边界框回归损失计算的方法包括GIoU、DIoU、CI…

低频电磁仿真 | 新能源汽车性能提升的利器

永磁同步电机 新能源汽车的心脏 近年来&#xff0c;全球变暖的趋势日益加剧&#xff0c;极端天气事件层出不穷&#xff0c;这些现象都反映出当前气候形势的严峻性。为了应对这一全球性挑战&#xff0c;各国纷纷采取行动&#xff0c;制定了一系列降碳、减碳的措施。中国在2020年…

ElasticView一款ElasticSearch的web可视化工具

ElasticView 是一款用来监控ElasticSearch状态和操作ElasticSearch索引的web可视化工具。它由golang开发而成&#xff0c;具有部署方便&#xff0c;占用内存小等优点 ElasticSearch连接树管理&#xff08;更方便的切换测试/生产环境&#xff09;支持权限管理支持sql转换成dsl语…

从IoTDB的发展回顾时序数据库演进史

面向工业物联网时代&#xff0c;以 IoTDB 为代表的时序数据库加速发展。 时序数据的主要产生来源之一是设备与传感器&#xff0c;具有监测点多、采样频率高、存储数据量大等多类不同于其他数据类型的特性&#xff0c;从而导致数据库在实现高通量写入、存储成本、实时查询等多个…

第G2周:人脸图像生成(DCGAN)

第G2周&#xff1a;人脸图像生成&#xff08;DCGAN&#xff09; 第G2周&#xff1a;人脸图像生成&#xff08;DCGAN&#xff09;一、前言二、我的环境三、代码实现1、导入第三方库2、设置超参数3、导入数据 四、定义模型4.1 初始化权重4.2 定义生成器4.3 定义鉴别器 五、训练模…

2024年蓝桥杯40天打卡总结

2024蓝桥杯40天打卡总结 真题题解其它预估考点重点复习考点时间复杂度前缀和二分的两个模板字符串相关 String和StringBuilderArrayList HashSet HashMap相关蓝桥杯Java常用算法大数类BigInteger的存储与运算日期相关考点及函数质数最小公倍数和最大公约数排序库的使用栈Math类…

Go语言图像处理实战:深入image/color库的应用技巧

Go语言图像处理实战&#xff1a;深入image/color库的应用技巧 引言image/color库基础颜色模型简介颜色类型和接口 image/color库实际应用基本颜色操作创建颜色颜色值转换颜色比较 颜色转换与处理与image库结合使用 性能优化和高级技巧性能考量避免频繁的颜色类型转换使用并发处…

web服务器是如何运行的?tomcat基本原理

tomcat基本流程 tomcat在启动时将webapps下的每个项目中的web.xml读取&#xff0c;获取相关信息。tomcat只关心Servlet 程序、Filter 过滤器、Listener 监听器&#xff0c;不关心其他类。 tomcat接收到请求后会将请求报文转换成一个httpServletRequest对象&#xff0c;包含请求…

【MATLAB源码-第45期】基于matlab的16APSK调制解调仿真,使用卷积编码软判决。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 1. 16APSK调制解调 16APSK (16-ary Amplitude Phase Shift Keying) 是一种相位调制技术&#xff0c;其基本思想是在恒定幅度的条件下&#xff0c;改变信号的相位&#xff0c;从而传送信息。 - 调制&#xff1a;在16APSK中&am…