欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

小程序獲取當(dāng)前位置加搜索附近熱門小區(qū)及商區(qū)的方法

 更新時間:2019年04月08日 09:45:55   作者:GavinJay  
這篇文章主要介紹了小程序獲取當(dāng)前位置加搜索附近熱門小區(qū)及商區(qū)的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

本文詳細(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í)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評論