微信小程序 获取地理位置（显示地图并显示经纬度）

今天来说一下怎么显示地图并获取经纬度（获取到经纬度后显示地图）

首先我们先穿件一个项目结构如下

我们先来看一下wxml代码

//mp是地图标签 longitude经度 latitude纬度 根据经纬度来定位地图位置 show-location显示带有方向的当前定位点

//这是一个窗口 {{title}}//显示标题 {{content}}//显示内容 获取经纬度

然后我们来看一下js代码

// pages/lol/lol.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  modalcnt: function () {
    var that = this
    //获取经纬度
    wx.getLocation({
      type: 'gcj02',
      success: function (res) {
        console.log(res)
        var latitude = res.latitude
        var longitude = res.longitude
        that.setData({
          wd: latitude,
          jd: longitude
        })
        //显示模态窗口
        wx.showModal({

          title: '获取到当前的经纬度',
          content: '经度：' + longitude + '，纬度：' + latitude,
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定')
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          }
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */


  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

然后我们来看下效果

如果想看详细的代码介绍可以上官网 https://developers.weixin.qq.com/miniprogram/dev/api/ 查看