麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 課堂 > 小程序 > 正文

小程序獲取當前位置加搜索附近熱門小區及商區的方法

2020-03-21 16:00:13
字體:
來源:轉載
供稿:網友

本文詳細的介紹了小程序獲取當前位置搜索附近熱門小區及商區的方法,分享給大家

兩種方法:一種是騰訊地圖獲取,另一種是百度地圖獲取

我用的是騰訊地圖獲取步驟如下

小程序,當前位置,搜索,熱門小區

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) },})

這樣就一步一步實現了微信地理位置選擇

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VEVB武林網。


發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 毛片午夜| 欧美黄色性生活视频 | 国产精品成人av片免费看最爱 | 激情久久精品 | 麻豆19禁国产青草精品 | 欧美激情天堂 | 深夜小视频在线观看 | 亚洲乱操 | 免费久久久久久久 | 日韩电影av在线 | 久久精品亚洲一区 | 精品一区二区三区在线播放 | 日韩午夜一区二区三区 | 性高潮一级片 | 成人做爰高潮片免费视频韩国 | 欧美精品一区二区三区在线 | 黄色羞羞视频在线观看 | 9191色| 精品99在线视频 | 久久久久亚洲视频 | 天堂精品久久 | 久久久久久中文字幕 | 91精品观看91久久久久久国产 | 国产成人午夜高潮毛片 | h视频在线免费观看 | 毛片a级毛片免费播放100 | 中文字幕一区二区三区四区 | 久久福利在线 | 欧美人人干 | 羞羞羞网站 | cosplay裸体福利写真 | 最新午夜综合福利视频 | 日本精品久久久一区二区三区 | 欧美性生活免费视频 | 麻豆19禁国产青草精品 | 日日草夜夜草 | 欧美日韩免费一区 | 精品国产一区二区三区成人影院 | 国产亚洲精品综合一区 | 久久99在线 | 国产男女爽爽爽爽爽免费视频 |