小程序获取当前位置加搜索附近热门小区及商区

技术分享图片

1、话不多说,直接上干货

实现上图效果,主要技术是获取微信小程序地理位置,得到经纬度,使用微信小程序JavaScript SDK逆地址解析和地点搜索实现

2、微信小程序JavaScript SDK

申请开发者密钥(key):https://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.html 手机号注册即可使用。

 下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.0  下载完成后放入utils文件夹下引用即可

 安全域名设置,在“设置” -> “开发设置”中设置request合法域名,添加https://apis.map.qq.com

技术分享图片

3.详细代码

<view > <!-- 搜索框 --> <view class=search> <view class=search_box> <image src=../../../images/search.png class=search_image></image> <input type=text confirm-type="search" class=search_input placeholder=搜索地点 placeholder-class=input_placeholder bindinput="bindInputSchool" ></input> </view> </view> <view class=btn1 bindtap=BackTap2> 不显示位置 </view> <view class=btn2 wx:for="{{pois}}" wx:key="" bindtap=BackTap data-item={{index}}> <view >{{item.title}}</view> <view class=hint>{{item.address}}</view> </view></view>
//获取应用实例const app = getApp();var timer = false;var QQMapWX = require(../../../utils/qqmap-wx-jssdk.js);var qqmapsdk;Page({ data: { statusBarHeight: getApp().globalData.statusBarHeight, page:1, pois:[] }, //返回按钮 BackTap: function (e) { // console.log(this.data.lists[e.currentTarget.dataset.item]) app.globalData.addAddr=[] app.globalData.addAddr.push(this.data.pois[e.currentTarget.dataset.item]) wx.navigateBack({ delta: 1 }) }, BackTap2: function (e) { // console.log(this.data.lists[e.currentTarget.dataset.item]) app.globalData.addAddr=[] wx.navigateBack({ delta: 1 }) }, backTap3:function(){ wx.navigateBack({ delta: 1 }) }, onLoad: function () { qqmapsdk = new QQMapWX({ key: IOJBZ-VOT3Q-2G55W-G5FJ2-7UIKH-6JBGU }); }, onShow: function () { let vm = this; vm.getUserLocation(); }, getUserLocation: function () { let vm = this; wx.getSetting({ success: (res) => { console.log(JSON.stringify(res)) // res.authSetting[‘scope.userLocation‘] == undefined 表示 初始化进入该页面 // res.authSetting[‘scope.userLocation‘] == false 表示 非初始化进入该页面,且未授权 // res.authSetting[‘scope.userLocation‘] == true 表示 地理位置授权 if (res.authSetting[scope.userLocation] != undefined && res.authSetting[scope.userLocation] != true) { wx.showModal({ title: 请求授权当前位置, content: 需要获取您的地理位置,请确认授权, success: function (res) { if (res.cancel) { wx.showToast({ title: 拒绝授权, icon: none, duration: 1000 }) vm.BackTap2() } else if (res.confirm) { wx.openSetting({ success: function (dataAu) { if (dataAu.authSetting["scope.userLocation"] == true) { wx.showToast({ title: 授权成功, icon: success, duration: 1000 }) //再次授权,调用wx.getLocation的API vm.getLocation(); } else { wx.showToast({ title: 授权失败, icon: none, duration: 1000 }) vm.BackTap2() } } }) } } }) } else if (res.authSetting[scope.userLocation] == undefined) { //调用wx.getLocation的API vm.getLocation(); } else { //调用wx.getLocation的API vm.getLocation(); } } }) }, // 微信获得经纬度 getLocation: function () { let vm = this; wx.getLocation({ type: wgs84, success: function (res) { console.log(JSON.stringify(res),获得经纬度) var latitude = res.latitude var longitude = res.longitude vm.setData({ latitude: latitude, longitude: longitude }) vm.getLocal(latitude, longitude) }, fail: function (res) { vm.BackTap2() } }) }, // 获取当前地理位置 getLocal: function (latitude, longitude) { let vm = this; wx.showLoading({ title: 加载中, }) qqmapsdk.reverseGeocoder({ location: { latitude: latitude, longitude: longitude, }, coord_type:1, get_poi: 1, poi_options: page_size=20;page_index=+vm.data.page, success: function (res) { console.log(res,地理位置); wx.hideLoading() let pois = res.result.pois vm.setData({ pois: vm.data.pois.concat(pois), }) }, fail: function (res) { console.log(res); }, complete: function (res) { // console.log(res); } }); }, //根据坐标查询位置 bindInputSchool(e) { var val = e.detail.value; let vm = this clearTimeout(timer); timer = setTimeout(function () { if(val.length>0){ qqmapsdk.search({ keyword: val ,  //搜索关键词 location: { latitude: vm.data.latitude, longitude: vm.data.longitude, },  page_size:20, success: function (res) { console.log(res, 搜索位置); let pois = res.data vm.setData({ pois: pois, }) }, }); }else{ vm.setData({ pois:[], }) vm.getLocal(vm.data.latitude, vm.data.longitude) } }, 500); }, onReachBottom:function(){ let vm = this; vm.setData({ page:vm.data.page+1 }) vm.getLocal(vm.data.latitude, vm.data.longitude) },})

这样就一步一步实现了微信地理位置选择

相关文章