uniapp+微信小程序+地图+传入多个标记点显示+点击打开内置地图导航+完整代码

一、效果展示

二、完整代码

javascript 复制代码
<template>
	<view class="container">
		<map class="map-container" :latitude="latitude" :longitude="longitude" 
			:markers="markers" :controls="controls" show-location 
			@markertap="onMarkerTap">
		</map>
	</view>
</template>

<script>
export default {
	data() {
		return {
			latitude: 34.341568, // 默认中心点(西安)
			longitude: 108.940174,
			// 标记点(多个位置)
			markers: [
				{
					id: 1,
					latitude: 34.341568,
					longitude: 108.940174,
					title: "",
					iconPath: "/static/location.png", // 标记点图标
					width: 30,
					height: 30,
					callout: {
						content: "点击导航",
						color: "#ffffff",
						fontSize: 14,
						borderRadius: 10,
						bgColor: "#000000",
						padding: 8,
						display: "ALWAYS"
					}
				},
				{
					id: 2,
					latitude: 34.250568,
					longitude: 108.950174,
					title: "",
					iconPath: "/static/location.png",
					width: 30,
					height: 30,
					callout: {
						content: "点击导航",
						color: "#ffffff",
						fontSize: 14,
						borderRadius: 10,
						bgColor: "#000000",
						padding: 8,
						display: "ALWAYS"
					}
				}
			]
		};
	},
	methods: {
		// 点击标记点触发导航
		onMarkerTap(e) {
			const marker = this.markers.find(m => m.id === e.markerId);
			if (marker) {
				uni.openLocation({
					latitude: marker.latitude,
					longitude: marker.longitude,
					name: marker.title,
					address: marker.title,
					scale: 18
				});
			}
		}
	}
};
</script>

<style>
.container {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

.map-container {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
</style>

三、代码解释

整体说一下就是map直接组件就显示地图,marker就是标记点传进来显示,uni.openLocation这个就是打开手机内置地图然后选择你的地图就能正常导航过去

相关推荐
打不着的大喇叭8 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
zengzehui8 小时前
uniapp启动图被拉伸问题
uni-app
iOS阿玮10 小时前
AppStore教你一招免备案的骚操作!
uni-app·app·apple
ModyQyW1 天前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
耶啵奶膘2 天前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
耶啵奶膘2 天前
uniapp——地图路线绘制map
uni-app
shadouqi2 天前
uniapp实现图片预览,懒加载,下拉刷新等
uni-app
走,带你去玩2 天前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
菌菇汤2 天前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
某公司摸鱼前端3 天前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app