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

tingmailang2024-04-19 11:52

一、引言

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

二、定位搜索实现

1、位置搜索样式

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

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

html 复制代码 
<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、拖动地图

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

html 复制代码 
<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、附近位置样式

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

html 复制代码 
<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、搜索附近位置

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

javascript 复制代码 
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);
            }
        });
    },
javascript 复制代码 
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、地图拖动

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

javascript 复制代码 
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、标记地图定位

javascript 复制代码 
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、选择省市区样式

javascript 复制代码 
<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、省市区缓存

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

javascript 复制代码 
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、打开省市区页面

javascript 复制代码 
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、选择省市区

javascript 复制代码 
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、效果

四、总结

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

相关推荐
万物已到极致41 分钟前
微信小程序：vant组件库安装步骤
微信小程序·小程序
圈圈的熊1 小时前
微信小程序点击跳转打电话功能
微信小程序·小程序
金金金__1 小时前
微信小程序navigateTo:fail webview count limit exceed
微信小程序·小程序
计算机-秋大田3 小时前
基于微信小程序的在线疫苗预约的设计与实现，LW+源码+讲解
spring boot·后端·微信小程序·小程序·vue
BONE4 小时前
微信小程序开发：带你畅游路虎4S店
前端·微信小程序
北【辰】、8 小时前
uview Collapse折叠面板无法动态设置展开问题（微信小程序）
javascript·vue.js·微信小程序·小程序·前端框架
h1853859224410 小时前
电动车租赁支付宝免押小程序开发方案php+uniapp
微信小程序·uni-app·php·源码软件
平凡シンプル10 小时前
微信小程序瀑布流组件
微信小程序·开源软件·插件
h1853859224412 小时前
客运购票售票小程序校园巴士预约售票小程序开发方案php+uniapp
微信小程序·小程序·uni-app·php·uniapp·源码软件
热门推荐
01聊聊 Python 中的同步原语，为什么有了 GIL 还需要同步原语02Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04好数（蓝桥杯）05软件工程从理论到实践客观题汇总(头歌第一章至第八章)06组基轨迹建模 GBTM的介绍与实现（Stata 或 R）07怎样让音频速度变慢？请跟随以下方法进行操作08全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）09基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测10玄机平台应急响应—webshell查杀