圖文並茂--微信小程序,獲取用戶地理位置信息,並調用騰訊地圖API來獲取用戶具體位置


今天開始搞這個東西,下面是詳細的記錄

先看一下效果啦

1.小程序代碼先獲取用戶基礎位置信息

js

data: {
    myLocation: 'GET LOCATION',
      },
openMap() {
    var myThis = this
    wx.getLocation({
      type: 'gcj02', // 默認為 wgs84 返回 gps 坐標,gcj02 返回可用於 wx.openLocation 的坐標
      success: function (res) {
        // success
        console.log('獲取位置2');
        myThis.setData({
          myLocation: JSON.stringify(res)
        })
        console.log(res.latitude);
        console.log(res.longitude);

        wx.openLocation({
          latitude: res.latitude, // 緯度,范圍為-90~90,負數表示南緯
          longitude: res.longitude, // 經度,范圍為-180~180,負數表示西經
          scale: 28, // 縮放比例
          name: "要找的地方名字(某某飯店)",
          address: "地址:要去的地點詳細描述"
        })
      }
    })
  },
openMap1() {
    var myThis = this
    wx.getLocation({
      type: 'wgs84',
      success(res) {
        // 緯度,范圍為 -90~90,負數表示南緯
        const latitude = res.latitude
        // 經度,范圍為 -180~180,負數表示西經	
        const longitude = res.longitude
        // 速度,單位 m/s	
        const speed = res.speed
        // 位置的精確度,反應與真實位置之間的接近程度,可以理解成10即與真實位置相差10m,越小越精確
        const accuracy = res.accuracy
        myThis.setData({
          myLocation: '當前經度:' + latitude + '\n' + '當前緯度:' + longitude + '\n' + '當前速度:' + speed + '\n' + '當前位置精確度:' + accuracy
        })
        console.log(res.latitude);
        console.log(res.longitude);
      }
    })
  },

html

 <button type="default" bindtap="openMap">點擊打開地圖</button>
 <button type="default" bindtap="openMap1">點擊獲取我的位置</button>
 <text >{{myLocation}}</text> 

app.json

"pages": [
        "pages/index/index"
    ],
 "permission": {
        "scope.userLocation": {
            "desc": "你的位置信息將用於小程序位置接口的效果展示"
        }
    },

下面開始調用騰訊地圖API進行解析我們的經緯度

注冊賬號

點此進入騰訊地圖文檔

創建應用,獲取KEY,




發請求進行經緯度解析




JS


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM