场景
最近在做公司的一个发货小程序,其中遇到了一个比较特殊且常见的需求:打开地图选择收货地址
这个需求我也是第一次做,查阅了小程序官方文档后,发现了这么一个Api: wx.chooseLocation
wx.chooseLocation(Object object) | 微信开放文档
wx.chooseLocation
wx.chooseLocation 会在小程序中打开腾讯地图,供用户选择一个地址。
使用方法
wx.chooseLocation({
success: (res) => {
console.log(res); //输出用户选择的地址信息
},
fail: () => {}
});
设置地图中心latitude、longitude
地图打开后默认的中心位置是用户当前的位置信息,但如果我们想要直接锁定用户的省市区位置,则需要传入经纬度latitude、longitude
因为我的需求场景是用户选择了省市区后,打开地图选择详细位置信息,所有我调用了腾讯地图的web api(地址转坐标)WebService API | 腾讯位置服务
通过改接口即可获取目标地址的经纬度信息,再将其传入wx.chooselocation 中以便锁定中心位置。
Taro.chooseLocation({
latitude: location.lat,
longitude: location.lng,
success: (res) => {
console.log(res);
formRef.current.setValues({
address_detail: res.name
});
formRef.current.validate('address_detail');
},
fail: () => {}
});