wanzai_school_app/components/MapContainer.vue

<template>
	<view>
		<map style="width: 100%; height: 469rpx" :latitude="latitude" :longitude="longitude" scale="18" :markers="markers" :polyline="polyline" enable-3D></map>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 中心点
const latitude = ref(28.103487)
const longitude = ref(114.443029)

// 图标点数据
const markers = ref([
	{
		iconPath: '/static/images/marker.png',
		id: 1,
		latitude: 28.705019,
		longitude: 115.831653,
		width: 18,
		height: 18,
		callout: {
			content: '10:50\n进入校园',
			fontSize: 12,
			borderRadius: 6,
			padding: 6,
			display: 'ALWAYS',
			textAlign: 'left',
			anchorX: 30
		}
	},
	{
		iconPath: '/static/images/marker.png',
		id: 2,
		latitude: 28.704551,
		longitude: 115.831675,
		width: 18,
		height: 18,
		callout: {
			content: '11:50\n吃饭',
			fontSize: 12,
			borderRadius: 6,
			padding: 6,
			display: 'ALWAYS',
			textAlign: 'left',
			anchorX: 30
		}
	},
	{
		iconPath: '/static/images/marker.png',
		id: 3,
		latitude: 28.704951,
		longitude: 115.832297,
		width: 18,
		height: 18,
		callout: {
			content: '12:50\n睡觉',
			fontSize: 12,
			borderRadius: 6,
			padding: 6,
			display: 'ALWAYS',
			textAlign: 'left',
			anchorX: 30
		}
	}
])

// 地图轨迹数据
const polyline = ref([
	{
		points: [
			{ latitude: 28.705019, longitude: 115.831653 },
			{ latitude: 28.704551, longitude: 115.831675 },
			{ latitude: 28.704951, longitude: 115.832297 }
		],
		color: '#1E7DFB',
		width: 2
	}
])

onLoad(() => {})
</script>

<style scoped></style>