小程序獲取當(dāng)前位置加搜索附近熱門小區(qū)及商區(qū)的方法
本文詳細的介紹了小程序獲取當(dāng)前位置加搜索附近熱門小區(qū)及商區(qū)的方法,分享給大家
兩種方法:一種是騰訊地圖獲取,另一種是百度地圖獲取
我用的是騰訊地圖獲取步驟如下

1、話不多說,直接上干貨
實現(xiàn)上圖效果,主要技術(shù)是獲取微信小程序地理位置,得到經(jīng)緯度,使用微信小程序JavaScript SDK逆地址解析和地點搜索實現(xiàn)
2、微信小程序JavaScript SDK
申請開發(fā)者密鑰(key):https://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.html手機號注冊即可使用。
下載微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.0 下載完成后放入utils文件夾下引用即可
安全域名設(shè)置,在“設(shè)置” -> “開發(fā)設(shè)置”中設(shè)置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>
//獲取應(yīng)用實例
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 表示 非初始化進入該頁面,且未授權(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: '需要獲取您的地理位置,請確認授權(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)
},
})
這樣就一步一步實現(xiàn)了微信地理位置選擇
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
兼容ie、firefox的圖片自動縮放的css跟js代碼分享
最近編輯反應(yīng),圖片有時候太大了,如果隱藏了,可能部分內(nèi)容別人就看不到了,如果手工設(shè)置圖片大小又太麻煩了,這里就提供一個方法讓也沒的圖片等比例縮放2013-08-08
JavaScript制作windows經(jīng)典掃雷小游戲
掃雷是一款相當(dāng)大眾的小游戲,游戲目標(biāo)是在最短的時間內(nèi)根據(jù)點擊格子出現(xiàn)的數(shù)字找出所有非雷格子,同時避免踩雷。今天我們來看看如何使用javascript來實現(xiàn)這款小游戲2015-03-03
后端代碼規(guī)范避免數(shù)組下標(biāo)越界
這篇文章主要為大家介紹了后端開發(fā)中的代碼如何規(guī)范避免數(shù)組下標(biāo)越界示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪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

