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

相关推荐
&活在当下&2 分钟前
uniapp 选择城市区号索引列表实现
前端·uni-app
全栈小534 分钟前
【小程序】微信小程序开发,分享给朋友或者朋友圈的功能增加地址参数,以及如何进行带参数本地测试
微信小程序·小程序
canglingyue34 分钟前
小程序NFC应用
小程序
说私域37 分钟前
链动2+1模式AI智能名片小程序驱动下的社群互动与消费升级研究
人工智能·小程序
FILLKL37 分钟前
微信PC版本4.0后小程序目录变更
微信·小程序
QQ5885019839 分钟前
springboot地区特色农产品团购商城平台 小程序
spring boot·后端·小程序
曾宇琪 83230132540 分钟前
PoopCare 小程序用户使用调查报告
小程序
蜂酷科技资讯140 分钟前
用小程序开发平台一天做俩小程序?这赚钱效率我服了
小程序
猫头虎40 分钟前
蚂蚁百宝箱 3 分钟上手 MCP:6 步轻松构建 Qwen3 智能体应用并发布小程序
人工智能·小程序·prompt·aigc·agi·ai-native·智能体
1登峰造极15 小时前
uniapp 运行安卓报错reportJSException >>>> exception function:createInstanceContext, exception:white screen
android·java·uni-app