小程序獲取當(dāng)前位置加搜索附近熱門小區(qū)及商區(qū)的方法
本文詳細(xì)的介紹了小程序獲取當(dāng)前位置加搜索附近熱門小區(qū)及商區(qū)的方法,分享給大家
兩種方法:一種是騰訊地圖獲取,另一種是百度地圖獲取
我用的是騰訊地圖獲取步驟如下
1、話不多說,直接上干貨
實(shí)現(xiàn)上圖效果,主要技術(shù)是獲取微信小程序地理位置,得到經(jīng)緯度,使用微信小程序JavaScript SDK逆地址解析和地點(diǎn)搜索實(shí)現(xiàn)
2、微信小程序JavaScript SDK
申請開發(fā)者密鑰(key):https://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.html手機(jī)號注冊即可使用。
下載微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.0 下載完成后放入utils文件夾下引用即可
安全域名設(shè)置,在“設(shè)置” -> “開發(fā)設(shè)置”中設(shè)置request合法域名,添加https://apis.map.qq.com
3.詳細(xì)代碼
<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='搜索地點(diǎn)' 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>
//獲取應(yīng)用實(shí)例 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 表示 初始化進(jìn)入該頁面 // res.authSetting['scope.userLocation'] == false 表示 非初始化進(jìn)入該頁面,且未授權(quán) // res.authSetting['scope.userLocation'] == true 表示 地理位置授權(quán) if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) { wx.showModal({ title: '請求授權(quán)當(dāng)前位置', content: '需要獲取您的地理位置,請確認(rèn)授權(quán)', success: function (res) { if (res.cancel) { wx.showToast({ title: '拒絕授權(quán)', icon: 'none', duration: 1000 }) vm.BackTap2() } else if (res.confirm) { wx.openSetting({ success: function (dataAu) { if (dataAu.authSetting["scope.userLocation"] == true) { wx.showToast({ title: '授權(quán)成功', icon: 'success', duration: 1000 }) //再次授權(quán),調(diào)用wx.getLocation的API vm.getLocation(); } else { wx.showToast({ title: '授權(quán)失敗', icon: 'none', duration: 1000 }) vm.BackTap2() } } }) } } }) } else if (res.authSetting['scope.userLocation'] == undefined) { //調(diào)用wx.getLocation的API vm.getLocation(); } else { //調(diào)用wx.getLocation的API vm.getLocation(); } } }) }, // 微信獲得經(jīng)緯度 getLocation: function () { let vm = this; wx.getLocation({ type: 'wgs84', success: function (res) { console.log(JSON.stringify(res),'獲得經(jīng)緯度') var latitude = res.latitude var longitude = res.longitude vm.setData({ latitude: latitude, longitude: longitude }) vm.getLocal(latitude, longitude) }, fail: function (res) { vm.BackTap2() } }) }, // 獲取當(dāng)前地理位置 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); } }); }, //根據(jù)坐標(biāo)查詢位置 bindInputSchool(e) { var val = e.detail.value; let vm = this clearTimeout(timer); timer = setTimeout(function () { if(val.length>0){ qqmapsdk.search({ keyword: val , //搜索關(guān)鍵詞 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) }, })
這樣就一步一步實(shí)現(xiàn)了微信地理位置選擇
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序搜索組件wxSearch實(shí)例詳解
- 微信小程序?qū)崿F(xiàn)全局搜索代碼高亮的示例
- 微信小程序下拉框搜索功能的實(shí)現(xiàn)方法
- 小程序?qū)崿F(xiàn)搜索框功能
- 微信小程序?qū)崿F(xiàn)搜索歷史功能
- 小程序?qū)崿F(xiàn)搜索框
- 微信小程序 搜索框組件代碼實(shí)例
- 微信小程序城市選擇及搜索功能的方法
- 微信小程序搜索功能(附:小程序前端+PHP后端)
- 微信小程序 可搜索的地址選擇實(shí)現(xiàn)詳解
- 微信小程序?qū)崿F(xiàn)搜索指定景點(diǎn)周邊美食、酒店
- 微信小程序開發(fā)搜索功能實(shí)現(xiàn)(前端+后端+數(shù)據(jù)庫)
相關(guān)文章
兼容ie、firefox的圖片自動縮放的css跟js代碼分享
最近編輯反應(yīng),圖片有時候太大了,如果隱藏了,可能部分內(nèi)容別人就看不到了,如果手工設(shè)置圖片大小又太麻煩了,這里就提供一個方法讓也沒的圖片等比例縮放2013-08-08JavaScript制作windows經(jīng)典掃雷小游戲
掃雷是一款相當(dāng)大眾的小游戲,游戲目標(biāo)是在最短的時間內(nèi)根據(jù)點(diǎn)擊格子出現(xiàn)的數(shù)字找出所有非雷格子,同時避免踩雷。今天我們來看看如何使用javascript來實(shí)現(xiàn)這款小游戲2015-03-03javascript 解析后的xml對象的讀取方法細(xì)解
2009-07-07后端代碼規(guī)范避免數(shù)組下標(biāo)越界
這篇文章主要為大家介紹了后端開發(fā)中的代碼如何規(guī)范避免數(shù)組下標(biāo)越界示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-06-06關(guān)于javascript event flow 的一個bug詳解
描述了firefox,safari 有一個bug和DOM 3 規(guī)范不一致:在event.currentTarget等于event.target的時候(即event flow處于target phase時),會調(diào)用添加到currentTarget上的useCapture為true的listener2013-09-09