怎么在微信小程序调起地图选择定位地点

功能介绍

示例图

这个功能是小程序会打开地图显示附近的地点,用户可以在地图或者列表选择位置添加地点。用于添加收货地址、添加商铺等功能场景。怎么做这个功能呢?

怎么做

第一步

在wxml文件加上调起这个"onSearchAddress"

<!-- xx.wxml -->

<button bindtap="onSearchAddress" class="input-button">选择地址</button>

第二步

在js文件加入以下代码内容

// JS文件代码:

//授权相关权限
builtInSearch({ code, name }) {
      return new Promise((resolve, reject) => {
        wx.getSetting({
          success: (res) => {
            if (res.authSetting[code] === false) {
              wx.showModal({
                title: `获取${name}失败`,
                content: `获取${name}失败,请在【右上角】-小程序【设置】项中,将【${name}】开启。`,
                confirmText: '去设置',
                confirmColor: '#FA550F',
                cancelColor: '取消',
                success(res) {
                  if (res.confirm) {
                    wx.openSetting({
                      success(settinRes) {
                        if (settinRes.authSetting[code] === true) {
                          resolve();
                        } else {
                          console.warn('用户未打开权限', name, code);
                          reject();
                        }
                      },
                    });
                  } else {
                    reject();
                  }
                },
                fail() {
                  reject();
                },
              });
            } else {
              resolve();
            }
          },
          fail() {
            reject();
          },
        });
      });
    },
  
    onSearchAddress() {
      console.log('onSearchAddress method is triggered');
      this.builtInSearch({ code: 'scope.userLocation', name: '地址位置' }).then(() => {
        wx.chooseLocation({
          success: (res) => {
            console.log('wx.chooseLocation success:', res);
            if (res.name) {
              this.setData({
                'locationState.address': res.address,
                'locationState.name': res.name,
                'locationState.latitude': res.latitude,
                'locationState.longitude': res.longitude,
              });
            } else {
              Toast({
                context: this,
                selector: '#t-toast',
                message: '地点为空,请重新选择',
                icon: '',
                duration: 1000,
              });
            }
          },
          fail: function (res) {
            console.warn(`wx.chooseLocation fail: ${JSON.stringify(res)}`);
            if (res.errMsg !== 'chooseLocation:fail cancel') {
              Toast({
                context: this,
                selector: '#t-toast',
                message: '地点错误,请重新选择',
                icon: '',
                duration: 1000,
              });
            }
          },
        });
      });
    },

主要是通过小程序官方wx.chooseLocation接口调起小程序内置的地图选择界面

(官方文档:wx.chooseLocation(Object object) | 微信开放文档

除此以上代码之外,还需要把https://apis.map.qq.com地址添加到request合法域名中才能运行,如未添加具体可以参考重新编译后的报错信息来解决

  • 8
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值