uniapp做小程序内打开地图展示位置信息

  • 使用场景:项目中需要通过位置信息打开地图查看当前位置信息在地图那个位置,每个酒店有自己的经纬度和详细地址,点击地图按钮打开内置地图
  • 如图



方法如下:

html 复制代码
		<view class="dttu" @click="openMap(info.locationY,info.locationX,info.locationArea)">
						<image src="https://images.bocaihotel.net/images/dt.png" mode=""></image>
						<view class="">
							地图
						</view>
					</view>
javascript 复制代码
	// 打开地图
			openMap(latitudeStr, longitudeStr, address) {
				const latitude = parseFloat(latitudeStr);
				const longitude = parseFloat(longitudeStr);

				uni.openLocation({
					latitude: latitude, // 纬度
					longitude: longitude, // 经度
					address: address, // 地址的详细描述
					success() {
						console.log('地图打开成功');
					},
					fail(error) {
						console.error('地图打开失败', error);
					}
				});
			},

这样就可以啦,前期的准备工作要在微信公众平台进行申请相关的api哦~

相关推荐
菠菠萝宝15 分钟前
【AI应用探索】-10- Cursor实战:小程序&APP - 下
人工智能·小程序·kotlin·notepad++·ai编程·cursor
qq_124987075342 分钟前
基于微信小程序的茶叶茶具销售和管理系统(源码+论文+部署+安装)
微服务·微信小程序·小程序·毕业设计
CDwenhuohuo1 小时前
微信小程序里用 setData() 修改数据并打印输出 的几种写法
javascript·微信小程序·小程序
小明记账簿6 小时前
微信小程序开发实战:图片转 Base64 全解析
微信小程序·小程序
汤姆yu6 小时前
基于微信小程序的粤语文化传播系统
微信小程序·小程序
Q_Q5110082856 小时前
python+uniapp基于微信小程序的垃圾分类信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
ducaifeng867 小时前
微信小程序:onReady详解
微信小程序·小程序
你的眼睛會笑9 小时前
uniapp 鸿蒙元服务 真机调试流程指南
华为·uni-app·harmonyos
_jeneen9 小时前
小程序 scroll-view 触底事件不触发问题
微信小程序·小程序
2501_9159214310 小时前
查看iOS App实时日志的正确方式,多工具协同打造高效调试与问题定位体系(2025最新指南)
android·ios·小程序·https·uni-app·iphone·webview