微信小程序獲取當前經緯度並逆解析地址代碼


功能如標題。

map.wxml代碼如下:

<!--miniprogram/pages/map/map.wxml-->

<view><text>經度{{jd}}</text></view>

<view><text>緯度{{wd}}</text></view>

<view><text>地點{{address}}</text></view>

map.js源代碼如下:

// pages/map1/map1.js

var QQMapWX = require('../../lib/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({

  /**
   * 頁面的初始數據
   */
  data: {

  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    qqmapsdk = new QQMapWX({
      key: '22VBZ-REEK5-WVSI7-QKCOP-QPM6E-W7BPO'
    });
  },

  /**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function () {
    var that = this;
    wx.getLocation({
      type: 'wgs84',
      success: function (res) {
        console.log(res);
        var latitude1 = res.latitude;
        var longitude1 = res.longitude;
        qqmapsdk.reverseGeocoder({
          location: {
            latitude: latitude1,
            longitude: longitude1
          },
          success: function (res) {
            console.log(res);
            var add = res.result.address;
            that.setData({
              wd: latitude1,
              jd: longitude1,
              address: add
            })
          }
        })
      },
    })
   
  },

  /**
   * 生命周期函數--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命周期函數--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函數--監聽頁面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {

  }
})

  效果如下:

 


免責聲明!

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



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