地图组件,折线添加点击查看经纬度弹窗

This commit is contained in:
Double-_-Z 2025-10-20 11:53:42 +08:00
parent a1df8eb486
commit 2d5a90da0f

View File

@ -165,7 +165,7 @@
<bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
<bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
<bm-polyline :path="trackItem.tracks" stroke-color="#0091ff" :stroke-opacity="0.8"
:stroke-weight="2" :strokeWeight="6"></bm-polyline>
:stroke-weight="2" :strokeWeight="6" @click="toShowPolyline"></bm-polyline>
<bm-marker
v-if="trackItem.startDot"
:position="trackItem.startDot"
@ -179,8 +179,9 @@
:show="trackItem.showStartInfo"
@close="trackItem.showStartInfo=false"
@open="trackItem.showStartInfo=true"
title="起点:"
>
起点{{ trackItem.startDot.lat+''+trackItem.startDot.lng }}
{{ trackItem.startDot.lat+''+trackItem.startDot.lng }}
</bm-info-window>
</bm-marker>
<bm-marker
@ -196,13 +197,14 @@
:show="trackItem.showEndInfo"
@close="trackItem.showEndInfo=false"
@open="trackItem.showEndInfo=true"
title="终点:"
>
终点{{ trackItem.endDot.lat+''+trackItem.endDot.lng }}
{{ trackItem.endDot.lat+''+trackItem.endDot.lng }}
</bm-info-window>
</bm-marker>
<!-- <bml-lushu
:path="trackItem.tracks" :icon="icon" play rotation>
</bml-lushu> -->
<bm-info-window :position="polyline" title="经纬度:" :show="showPolyline" @close="showPolyline=false" @open="showPolyline=true">
{{ polyline.lng+''+polyline.lat }}
</bm-info-window>
</baidu-map>
<div class="route-info">
<span>飞行时长{{ trackItem.time }}</span>
@ -277,7 +279,9 @@ export default {
url: 'http://api.map.baidu.com/library/LuShu/1.2/examples/car.png',
size: {width: 52, height: 26},
opts: {anchor: {width: 27, height:13}}
}
},
showPolyline: false,
polyline: {},
}
},
created() {
@ -432,8 +436,7 @@ export default {
const distance = R * c; //
return distance;
},
//
}, //
setTrackTime(createTimeEnd) {
const tracks = this.trackItem.tracks;
if (tracks.length === 1) {
@ -480,6 +483,13 @@ export default {
}
return result;
},
// 线
toShowPolyline(e){
if(e.point){
this.polyline = e.point;
this.showPolyline = true;
}
},
handleApiClick(type) {
// API
console.log('跳转到API模块:', type)