vue-baidu-map-3x +vue3+ts百度地图--画出轨迹(2)

这一部分是已经导入地图后,在地图上画轨迹

这是我的卫星图组件

		<baidu-map class="map" :center="center" :zoom="18" :scroll-wheel-zoom="true" mapType="BMAP_SATELLITE_MAP">
			<!-- 绘制折线 -->
			<bm-polyline :path="trackPoints" stroke-color="blue" :stroke-opacity="0.8" :stroke-weight="4"
				:smooth="true" :smoothness="0.5" />
				<!-- 这是轨迹标记 -->
			<bm-marker v-for="(point, index) in trackPoints" :key="index" :position="point">
				<!-- :icon="{url: '/public/images/location.webp', size: { width: 30, height: 30 }}" -->
				<bm-info-window :show="index === 0">
					轨迹点{{ index + 1 }} <br>
					{{ point.lat.toFixed(4) }},{{ point.lng.toFixed(4) }}
				</bm-info-window>
			</bm-marker>
		</baidu-map>

在ts中
const center = ref({ lng: 120.2672467193475, lat: 36.349441451507516 })
// 模拟地图轨迹
const trackPoints = [
{
'lng': 120.2683121275432,
'lat': 36.34751563883231
}, {
'lng': 120.26795421697746,
'lat': 36.34857282166944
}, {
'lng': 120.26799583448505,
'lat': 36.34900377102818
}, {
'lng': 120.26801248148811,
'lat': 36.34940778386653
}, {
'lng': 120.26917777170216,
'lat': 36.349353915610266
}, {
'lng': 120.26708024931692,
'lat': 36.34938084974302
}, {
'lng': 120.26691377928627,
'lat': 36.34994646436113
}
]

posted @ 2025-05-28 15:46  小王不要404  阅读(149)  评论(2)    收藏  举报