微信小程序-獲取用戶位置（經(jīng)緯度+所在城市）

一、目標(biāo)

獲取用戶所在的城市

二、實(shí)現(xiàn)思路

1.利用微信小程序的接口函數(shù)獲取用戶位置的經(jīng)緯度

2.將經(jīng)緯度逆解析為結(jié)構(gòu)化的文字地址

3.根據(jù)結(jié)構(gòu)化的文字地址提取出需要的地址結(jié)構(gòu)成分，如省份、城市、區(qū)縣等。

三、實(shí)現(xiàn)步驟

3.1 用到的接口函數(shù)

微信小程序-獲取用戶位置的接口函數(shù)：wx.getLocation(Object object)

還需要用到小程序配置：permission

騰訊位置服務(wù)-逆地址解析（坐標(biāo)位置描述）接口函數(shù)：reverseGeocoder(options:Object)

3.2 具體步驟

3.2.1 創(chuàng)建界面

wxml文件

<view class="view1">點(diǎn)擊獲取用戶位置</view>
<view class="view2">用戶所在位置的經(jīng)度：{{latitude}}</view>
<view class="view2">用戶所在位置的緯度：{{longitude}}</view>
<view class="view2">用戶所在城市：{{city}}</view>

wxss文件

.view1 {
  background-color: yellow;
  width: 100%;
  height: 200rpx;
  margin-bottom: 20rpx;
}

.view2 {
  background-color: yellow;
  width: 100%;
  height: 100rpx;
  margin-bottom: 20rpx;
}

js文件

// index.js
// 獲取應(yīng)用實(shí)例
const app = getApp()

Page({
  data: {
    latitude: null,
    longitude: null,
    city: null
  },
  
  onLoad() {
    
  },
  
})

界面效果

3.2.2 獲取用戶位置的經(jīng)緯度

編寫觸發(fā)用戶位置經(jīng)緯度獲取的函數(shù)getLocation，在函數(shù)中調(diào)用wx.getLocation接口，獲取到經(jīng)度、緯度等信息，然后綁定到前端界面。

3.2.2.1 在app.json文件中配置permission

在用戶首次使用這一功能時(shí)，小程序詢問用戶是否授權(quán)獲取用戶的位置信息。之后不再詢問。（清除開發(fā)者工具的緩存、重新編譯小程序后會(huì)重新詢問，因?yàn)橹坝脩舻氖跈?quán)信息已經(jīng)被清除了）

app.json文件

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",

  //新增下面的代碼（上面的代碼是創(chuàng)建小程序項(xiàng)目后就已經(jīng)有的）
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息將用于小程序位置接口的效果展示"
    }
  }
}

3.2.2.2 調(diào)用wx.getLocation接口

wxml文件

//新增bindtap這個(gè)函數(shù)，使得用戶點(diǎn)擊這個(gè)view時(shí)就能觸發(fā)獲取用戶位置的功能
<view class="view1" bindtap="getLocation">點(diǎn)擊獲取用戶位置</view>

js文件

// index.js
// 獲取應(yīng)用實(shí)例
const app = getApp()

Page({
  data: {
    latitude: null,
    longitude: null,
    city: null
  },
  
  onLoad() {
    
  },
  
  // 新增下面這部分代碼
  getLocation() {
    var that = this;
    wx.getLocation({
      type: 'wgs84',
      success (res) {
        const latitude = res.latitude
        const longitude = res.longitude
        const speed = res.speed
        const accuracy = res.accuracy
        console.log(res) //將獲取到的經(jīng)緯度信息輸出到控制臺(tái)以便檢查
        that.setData({ //將獲取到的經(jīng)度、緯度數(shù)值分別賦值給本地變量
          latitude: res.latitude,
          longitude: res.longitude
        })
      }
     })
  }
})

效果

3.2.3 獲取用戶的所在城市

3.2.3.1 小程序之外的配置

在騰訊位置服務(wù)申請(qǐng)一個(gè)key

按照騰訊位置服務(wù)-微信小程序Javascript開發(fā)指南中的【入門及使用限制】中的說明，完成下列步驟。

下載小程序JavaScriptSDK

在騰訊位置服務(wù)的網(wǎng)站上下載即可（二選一，我下載的是v1.2），保存到微信小程序項(xiàng)目目錄下。

將下載的壓縮包解壓到當(dāng)前文件夾。

安全域名設(shè)置

登錄微信小程序公眾平臺(tái)，使用這個(gè)小程序的appid（或者自己微信賬號(hào)的測(cè)試號(hào)）登錄，在“服務(wù)器域名”配置request合法域名：https://apis.map.qq.com。

3.2.3.2 調(diào)用reverseGeocoder接口

js文件

// index.js
// 獲取應(yīng)用實(shí)例
const app = getApp()

//新增
// 引入SDK核心類，根據(jù)自己放的路徑來寫這個(gè)SDK核心類的位置
var QQMapWX = require('../../qqmap-wx-jssdk.js');

//新增
// 實(shí)例化API核心類
var qqmapsdk = new QQMapWX({
  key: '……' // 必填，填自己在騰訊位置服務(wù)申請(qǐng)的key
});

Page({
  data: {
    latitude: null,
    longitude: null,
    city: null
  },
  
  onLoad() {
    
  },
  
  getLocation() {
    var that = this;
    wx.getLocation({
      type: 'wgs84',
      success (res) {
        const latitude = res.latitude
        const longitude = res.longitude
        const speed = res.speed
        const accuracy = res.accuracy
        console.log(res)
        that.setData({
          latitude: res.latitude,
          longitude: res.longitude
        })
        
        //新增
        qqmapsdk.reverseGeocoder({
          //位置坐標(biāo)，默認(rèn)獲取當(dāng)前位置，非必須參數(shù) 
          //Object格式
          location: {
            latitude: res.latitude,
            longitude: res.longitude
          },
          success: function(res) {//成功后的回調(diào)
            console.log(res.result.ad_info.city);
            that.setData({
              city: res.result.ad_info.city
            })
            },
          fail: function(error) {
            console.error(error);
          },
          complete: function(res) {
            console.log(res);
          }
          })
      }
     })
  }
})

效果

參考

微信小程序獲取當(dāng)前位置和城市名文章來源地址http://www.zghlxwxcb.cn/news/detail-790985.html

到了這里，關(guān)于微信小程序-獲取用戶位置（經(jīng)緯度+所在城市）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！