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
}
]

浙公网安备 33010602011771号