Uniapp中小程序调用腾讯地图(获取定位地址)

1、先配置权限:

这是上图的代码:

"permission": {

"scope.userLocation": {

"desc": "你的位置信息将用于小程序位置接口的效果展示"

}

}

第二步:写代码:

javascript 复制代码
      
//====下面是uniapp的模版代码 主要就是 chooseLocation  方法

<!-- 上门服务地址 -->
      <view class="form-item">
        <text class="label">
          <text class="required">*</text>上门服务地址
        </text>
        <view class="input-wrapper" @click="chooseLocation">
          <input class="input" placeholder="请定位" v-model="form.serviceAddr" />
        </view>
        <view v-if="showServiceAddrError" class="error-tip">*请填写上门服务地址</view>
      </view>

//====下面是script代码



    //微信定位
    chooseLocation() {
      uni.authorize({
        scope: 'scope.userLocation',
        success: () => {
          uni.chooseLocation({
            success: (res) => {
              this.form.serviceAddr = res.address || res.name;
            },
            fail: () => {
              uni.showToast({ title: '定位失败', icon: 'none' });
            },
          });
        },
        fail: () => {
          uni.showModal({
            title: '授权提示',
            content: '需要您授权地理位置权限',
            success: (modalRes) => {
              if (modalRes.confirm) {
                uni.openSetting();
              }
            },
          });
        },
      });
    }
  },

第三步:用不用去配置其他,就这样行就好了,可以调出来腾讯地图。

相关推荐
xflySnail1 小时前
nas服务域名高速访问-DNS+ESA
运维·服务器·esa·无端口访问
赵民勇7 小时前
Linux/Unix中install命令全面用法解析
linux·shell
苏宸啊9 小时前
Linux指令篇(一)
linux·运维·服务器
我要升天!9 小时前
Linux中《网络基础》
linux·运维·网络
ZStack开发者社区10 小时前
ZStack Cloud 5.5.0正式发布
运维·服务器·网络
鸽芷咕10 小时前
【2025年度总结】时光知味,三载同行:落笔皆是沉淀,前行自有光芒
linux·c++·人工智能·2025年度总结
羑悻的小杀马特10 小时前
指尖敲代码,笔尖写成长:2025年度总结与那些没说出口的碎碎念
linux·c++·博客之星·2025年度总结
源代码•宸11 小时前
Golang语法进阶(并发概述、Goroutine、Channel)
服务器·开发语言·后端·算法·golang·channel·goroutine
晴天¥11 小时前
VMware+Oracle linux LVM/非LVM磁盘扩容
linux·运维·服务器
oMcLin11 小时前
如何在Oracle Linux 8.4上搭建并优化Kafka集群,确保高吞吐量的实时数据流处理与消息传递?
linux·oracle·kafka