微信小程序开发—地图选点获取地址及经纬度

在微信小程序开发过程中,对于电商线上发货或门店配送,不可避免会遇到需要用户填写收货地址的情况。通常的做法是直接通过省市区选择器,让客户选择并填写详细地址。但是有时需要定位门店并计算距离,此时我们需要更精确的地理位置信息——经纬度。

微信小程序官方提供了获取当前位置(含经纬度)的API: getLocation 。但是对于收件地址并不在当前位置时,就无法获取经纬度 。以下两种方法利用地图选点,可以解决这个问题。

微信小程序API(chooseLocation)

官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.chooseLocation.html.

  1. 调用此接口,跳转到地图界面(可通过经纬度指定位置,默认为当前位置),可地图上直接选点或搜索选择地址,回调结果中包含以下信息:
        wx.chooseLocation({
          latitude: 0,
          longitude: 0,
          success: (res)=>{
            console.log(res);
          }
        }
    
    在这里插入图片描述
  2. 我们可以看到此接口返回了详细地址及经纬度,但实际开发中后端数据存储可能需要“省、市、区”三个字段分别存储,所以还需要对返回的详细地址进行省市区拆分。对于省市区的拆分,可以选择:
    • 前端JS正则匹配拆分,这种方式不能保证拆分完全正确(例如澳门特别行政区下的某些地区并不满足通用的正则表达式)。
    • 调用腾讯位置服务的 地址解析功能 或者其他地图的API,进行地址解析,精准度大于JS正则匹配。但是如此也可返回经纬度,总觉得使用这个,那地图选点的功能有点多余?当然在使用者角度,选点当然更方便。
    • 期待官方此API返回省市区(社区有很多反馈但还未如愿,哈哈哈哈哈哈哈)

使用小程序插件(腾讯位置服务地图选点)

  1. 使用此插件的前提,需要在 腾讯位置服务 注册开发者,申请Key,开启产品“微信小程序”,填写appid及产品“WebServiceAPI”,填写域名白名单或授权IP
    微信小程序开发—地图选点获取地址及经纬度_第1张图片
  2. 微信小程序官方后台—设置—第三方服务—插件管理,添加插件,搜索 “腾讯位置服务地图选点” 申请,审核通过后,可在小程序内使用该插件。
    微信小程序开发—地图选点获取地址及经纬度_第2张图片
  3. 小程序内的具体操作实现,腾讯位置服务开发文档中详细说明:点此查看 ,在此不加说明
  4. 通过此插件,选点返回的地址位置信息如下:
    微信小程序开发—地图选点获取地址及经纬度_第3张图片
    可以看到此插件返回的信息中多了“省、市、区”三个字段
  5. 但是由于 一个 KEY只能授权一个 AppId,因此对于第三方开发者来说就有很大问题,不可能为每个客户小程序申请单独的KEY。(可能有解决办法,但是目前我还没有找到)

以上就是2种在微信小程序中,使用地图选点获取地址及经纬度的方法,如果你还有其他的或者更好的方案,下方评论告诉我哦~~

你可能感兴趣的:(小程序)