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

相关推荐
码视野11 小时前
课后报名小程序 — 从需求到原型的全栈实践
小程序
打瞌睡的朱尤15 小时前
微信小程序1~25
微信小程序·小程序
hnxaoli15 小时前
win10小程序(十八)剪切板循环粘贴
python·小程序
河北清兮网络科技1 天前
短剧 APP 产品说明
小程序·uni-app·短剧
宠友信息1 天前
一套基于uniapp+springboot完整社区系统是如何实现的?友猫社区源码级功能解析
java·spring boot·后端·微服务·微信·uni-app
AI品信智慧数智人2 天前
文旅景区小程序集成数字人智能语音交互系统,山东品信解锁AI伴游新玩法✨
人工智能·小程序
医疗信息化王工2 天前
钉钉小程序开发实战:投诉管理系统
小程序·钉钉·开发·投诉管理
灵机一物2 天前
灵机一物AI原生电商小程序(已上线)-从“48 小时失联”到“长期可触达”:一套小程序公众号关注引导 + 订阅消息授权的产品化设计
小程序
碎像2 天前
掌握uniapp发布微信小程序、App(Android)
微信小程序·小程序·uni-app
stpzhf2 天前
uniapp nvue组件多个text在一行并且高亮其中一些文字
前端·javascript·uni-app