uniapp 配置chooseLocation微信小程序腾讯地图选点

uniapp 配置chooseLocation微信小程序腾讯地图选点

在这里插入图片描述

场景

在uniapp中使用地图选点
搜索功能,回显功能,移动选点功能

使用到的API是uni.chooseLocation 详细看一下都有哪些属性

  • latitude :目标地纬度 Number

  • longitude :目标地经度Number

  • keyword:搜索关键字,仅App平台支持 String

  • success:接口调用成功的回调函数 Function

    • success 返回参数说明
      • name :位置名称
      • address:详细地址
      • latitude:纬度,浮点数
      • longitude:经度,浮点数
  • fail:接口调用失败的回调函数 Function

  • complete:接口调用结束的回调函数 Function

实战

HTML

<view class="icon-corlor" @click="pointer">选择地址</view>

JS:这里直接调用uni.chooseLocation API
亿点小知识:chooseLocation 属于封装型API,开发者若觉得不够灵活,可自行基于原始的 map 组件进行封装。插件市场已经有各种封装样例了

pointer() {
		uni.chooseLocation({
			success: async function(res) {
				console.log(res.address, "返回地址")
		},
		fail: function(e) {
				console.log(e, "报错")
			}
		})
	},

以上就实现了基本的使用

报错 requiredPrivateInfos field

可能会报以下错:wx.chooseLocation need to be declared in the requiredPrivateInfos field in

在这里插入图片描述
这是因为需要在requiredPrivateInfos中配置:

自 2022 年 7 月 14 日后发布的小程序,使用以下8个地理位置相关接口时,需要声明该字段,否则将无法正常使用。2022 年 7 月 14 日前发布的小程序不受影响。

在微信小程序中是 app.json文件 但在uniapp中是manifest.json 我们找到源码视图
在这里插入图片描述
在代码中配置需要的插件

 "mp-weixin" : {
        "appid" : "wx6a2自己的id",
		"requiredPrivateInfos": [
			"getLocation",
			"onLocationChange",
			"startLocationUpdateBackground",
			"chooseAddress",
			"chooseLocation"
		]
    }

这里还有注意的是需要去 微信公众官方平台开通权限

在小程序管理后台,「开发」-「开发管理」-「接口设置」中自助开通该接口权限

在这里插入图片描述
在这里插入图片描述

以上就是uniapp 配置chooseLocation微信小程序腾讯地图选点感谢大家的阅读
如碰到其他的问题 可以私下我 一起探讨学习
如果对你有所帮助还请 点赞 收藏谢谢~!
关注收藏博客 作者会持续更新…

  • 28
    点赞
  • 32
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 38
    评论
评论 38
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

下一站丶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值