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哦~

相关推荐
是店小二呀4 分钟前
【Linux】从零开始:编写你的第一个Linux进度条小程序
linux·运维·小程序
计算机-秋大田18 分钟前
基于微信小程序的电影交流平台设计与实现(LW+源码+讲解)
java·微信小程序·小程序·课程设计
资深前端之路21 分钟前
vue运用uniapp框架开发企业微信小程序中常用的一些基础方法
uni-app
然后就去远行吧7 小时前
小程序组件 —— 31 事件系统 - 事件绑定和事件对象
前端·javascript·小程序
说私域7 小时前
社群团购项目运营策略的深度剖析:融合链动2+1模式、AI智能名片与S2B2C商城小程序的综合应用
大数据·人工智能·小程序
林涧泣10 小时前
【Uniapp-Vue3】@import导入css样式及scss变量用法与static目录
css·uni-app·scss
oil欧哟10 小时前
uniapp 小程序 textarea 层级穿透,聚焦光标位置错误怎么办?
vue.js·小程序·uni-app·uniapp
说私域11 小时前
微商关系维系与服务创新:链动2+1模式、AI智能名片与S2B2C商城小程序的应用研究
人工智能·小程序
说私域14 小时前
信息时代的消费者行为变迁与应对策略:基于链动2+1模式、AI智能名片及S2B2C商城小程序的分析
大数据·人工智能·小程序
毕业设计-0119 小时前
0051.ssm+小程序校园餐厅订餐小程序+论文
后端·小程序·毕业设计·ssm·源代码管理