微信小程序获取当前经纬度以及打开地图选择位置信息

一、app.json配置

wx.getLocation 和 wx.chooseLocation 使用时需要声明

  "permission": {
    "scope.userLocation": {
      "desc": "您的位置将在小程序地图上展示"
    }
  },
  "requiredPrivateInfos": [
    "getLocation",
    "chooseLocation"
  ]

二、获取经纬度

index.ts 代码
官方文档：wx.getLocation 使用该方法获取经纬度

Page({
	data:{
		lng:0, // 经度
		lat:0  // 纬度
	},
	onLoad() {
	  // 在需要使用地图或需要使用经纬度的地方使用 wx.getLocation 询问用户是否授权位置信息
	  wx.getLocation({
    	type: 'wgs84',
    	success(res) {
      		console.log(res)
    		that.setData({
          		lat: res.latitude,
          		lng: res.longitude
        	})
      	},
      	fail(err) {
        	console.log(err)
      	}
  	  })
  	}
})

授权截图

输出结果

三、打开地图选择位置信息

官网文档：wx.chooseLocation 使用此方法打开地图
index.WXML 代码

<view class="container">
  <button class="map" type="primary" bindtap="mapOpen">地图</button>
</view>

index.ts 代码

Page({
  data: {
    lat: 0,
    lng: 0,
  },
  onLoad() {
  	// 获取用户经纬度
    wx.getLocation({
      type: 'gcj02',
      success(res) {
        console.log(res)
        that.setData({
          lat: res.latitude,
          lng: res.longitude
        })
      },
      fail(err) {
        console.log(err)
      }
    })
  },
  mapOpen() {
    let that = this
    wx.chooseLocation({
      latitude: that.data.lat,
      longitude: that.data.lng,
      success(res) {
      	// 选择位置返回的信息
        console.log(res)
      }
    })
  },
})

地图截图

输出结果

四、补充

从我们获取到的详细信息中获取到省 市 区

  mapOpen() {
    let that = this
    wx.chooseLocation({
      latitude: that.data.lat,
      longitude: that.data.lng,
      success(res) {
        console.log(res.address.slice(0, res.address.indexOf('省') + 1))
        console.log(res.address.slice(res.address.indexOf('省') + 1, res.address.indexOf('市') + 1))
        console.log(res.address.slice(res.address.indexOf('市') + 1, res.address.indexOf('区') + 1))
        console.log(res.name)
      }
    })
  },

输出结果