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

相关推荐
AI品信智慧数智人3 小时前
文旅景区小程序集成数字人智能语音交互系统,山东品信解锁AI伴游新玩法✨
人工智能·小程序
医疗信息化王工4 小时前
钉钉小程序开发实战:投诉管理系统
小程序·钉钉·开发·投诉管理
灵机一物7 小时前
灵机一物AI原生电商小程序(已上线)-从“48 小时失联”到“长期可触达”:一套小程序公众号关注引导 + 订阅消息授权的产品化设计
小程序
碎像7 小时前
掌握uniapp发布微信小程序、App(Android)
微信小程序·小程序·uni-app
stpzhf8 小时前
uniapp nvue组件多个text在一行并且高亮其中一些文字
前端·javascript·uni-app
qq_316837758 小时前
制作uniapp原生插件 在本地离线打包中测试 集成在云打包中
uni-app
CHU7290351 天前
生鲜团购商城小程序:新鲜触手可及的便捷购物新体验
小程序
医疗信息化王工1 天前
钉钉小程序开发实战:手术查询小程序
小程序·钉钉·手术查询
Fate_I_C1 天前
uniappx 鸿蒙运行包制作失败
华为·uni-app·uniapp·harmonyos
软件开发技术1 天前
新版点微同城主题源码34.7+全套插件+小程序前后端 源文件
小程序·php