第一步:首先要认识三个小程序的 api
wx.chooseLocation 和 wx.getLocation 和 wx.openLocation
(1).wx.chooseLocation 用于在小程序中选择地理位置。当用户点击选择位置按钮时,小程序会调起地图选择界面,用户可以在地图上选择一个位置,并可以获取到该位置的经纬度、名称、详细地址等信息。
(2).wx.getLocation 可以获取用户当前的经纬度信息,并可根据需要获取用户的详细地址、速度等附加信息。使用 wx.getLocation API 可以让小程序在需要的情况下获取用户的地理位置信息,然后根据这些信息来进行相关的操作。
(3).wx.openLocation 用于在地图上打开指定的位置。通过调用 wx.openLocation API,开发者可以传入经度、纬度、名称、地址等参数来指定一个具体的地理位置,然后微信客户端会打开地图并显示该位置。
所以,三者的区别主要在于:
1. wx.chooseLocation 是用于选择地理位置的,返回用户选择的位置信息。
2. wx.getLocation 是用于获取用户当前位置的,返回用户当前位置的信息。
3.wx.openLocation 用于打开地图显示一个指定的位置,而不是获取用户当前位置或选择位置。它用于在小程序中以地图的形式展示一个固定的地理位置,让用户查看或进一步操作。
需要注意的是,使用 wx.getLocation API,wx..getLocation 需要用户在微信公众平台申请权限,并在 app.json 中进行配置,如下:
"requiredPrivateInfos": [
"getLocation",
"chooseLocation"
],
第二步:具体用法
第一种:打开地图自行选择位置并展示,具体代码如下:
//选择地址
chooseLocation: function () {
//保存上下文
var that = this;
wx.chooseLocation({
success: (res) => {
//返回自己选择的经度 纬度 和详细地址信息
console.log(res);
//就向发布动态一样需要将获取到的地理位置信息存储起来
//展示动态直接渲染
that.setData({
curChooseAddress: res.address,
curChooseLatitude: res.latitude,
curChooseLongitude: res.longitude
})
},
fail: (res) => {
//未授权需要先进行授权
//获取授权过的设置
wx.getSetting({
success: (res) => {
console.log(res.authSetting['scope.userLocation']);
//如果不存在地址授权 则需要进行确认授权
if (!res.authSetting['scope.userLocation']) {
//方法一:打开设置进行授权
wx.openSetting({
success: (res) => {
res.authSetting = {
"scope.userLocation": true
}
}
})
//方法二:弹窗进行授权
wx.authorize({
scope: 'scope.userLocation',
success () {
// 用户已经同意小程序使用录音功能,可以再次调用该方法
that.chooseLocation()
}
})
}
}
})
}
})
}
第二种:就是获取当前的经纬度,并在地图中显示该位置,具体代码如下:
//打开地图
openMap(){
wx.getLocation({
type: 'gcj02', //返回可以用于 wx.openLocation 的经纬度
success (res) {
const latitude = res.latitude //当前位置的经度和纬度
const longitude = res.longitude
wx.openLocation({
//根据经度和纬度打开地图指定位置
latitude,
longitude,
scale: 18 //尺寸
address: //地址的详细说明
name: //位置名
})
}
})
}