主文件代码
<template>
<div class="container">
<baidu-map style="width: 100%;height: 100vh;"
:center="center" :zoom="zoom" @ready="handler"
:scroll-wheel-zoom="true" :mapClick="false"
@moveend="syncCenterAndZoom" @zoomend="syncCenterAndZoom">
<!-- 图标 -->
<bm-marker v-for="item in maps" :key="item.id"
:position="{lng: item.longitude, lat: item.latitude}"
:icon="{url: require('@/assets/images/location.png'), size: {width: 40, height: 40}}"
>
</bm-marker>
<!-- 箭头折线 -->
<new-polyline
v-if="points && points.length >= 2 && checkPoints({ points })"
:path="points"
:icons="icons"
stroke-color="#0091ea"
:stroke-opacity="0.8"
:stroke-weight="10"
></new-polyline>
</baidu-map>
</div>
</template>
<script>
import newPolyline from "./new_polyline";
export default {
components: {
newPolyline
},
data() {
return {
center: {
lng: 0,
lat: 0
},
map: "", // 地图
maps: [], // 站点信息数组
nowStationId: '',
timeId: "", //循环
zoom: 13,
contentShow: false,
nameShow: true,
points: [],
icons: []
};
},
methods: {
handler({BMap, map}) {
this.getTreePath()
this.getMapData()
var sy = new BMap.Symbol(BMap_Symbol_SHAPE_FORWARD_OPEN_ARROW, {
scale: 0.5, // 图标缩放大小
strokeColor: "#fff", // 设置矢量图标的线填充颜色
strokeWeight: "3" // 设置线宽
});
var icons = new BMap.IconSequence(sy, "5%", "15%");
this.icons.push(icons)
},
//获取首次加载点(引接口)
getTreePath() {
this.center.lng = 114.52785300795644
this.center.lat = 38.14758574827796
this.nowStationId = '1'
},
//获取数据(引接口)
getMapData() {
this.points = [];
this.maps = [
{
"id": "1",
"name": "站点名称站点名称站点名称站点名称站点名称",
"longitude": 114.52785300795644,
"latitude": 38.14758574827796,
},
{
"id": "2",
"name": "站点名称2",
"longitude": 114.54050114953694,
"latitude": 38.13759635572114,
},
{
"id": "3",
"name": "站点名称3",
"longitude": 114.56579743269792,
"latitude": 38.12419932394176,
},
{
"id": "4",
"name": "站点名称4",
"longitude": 114.5908781225365,
"latitude": 38.12056580319661,
},
{
"id": "5",
"name": "站点名称5",
"longitude": 114.6115750814864,
"latitude": 38.11613720325717,
},
{
"id": "6",
"name": "站点名称6",
"longitude": 114.63838051790414,
"latitude": 38.11556941444744,
},
{
"id": "7",
"name": "站点名称7",
"longitude": 114.68336765784383,
"latitude": 38.10284977850926,
}
]
for (var i in this.maps) {
this.points.push(
{
lng: this.maps[i].longitude,
lat: this.maps[i].latitude
}
)
}
},
// 查重 如果数组中只有一组有意义的坐标,绘制折线时可能会报错,因为绘制一条折线需要两组不同的坐标点
checkPoints({ points }) {
// 拿到第一组点
var originPoint = points[0];
// 将第一组点与后续点进行对比 如果坐标集合中只有一组实际坐标点则return false
// 只要坐标集合中有两组不同的实际坐标点,则return true
for (var i = 1; i < points.length; i++) {
if (
points[i].lat !== originPoint.lat ||
points[i].lng !== originPoint.lng
) {
return true;
}
}
return false;
},
}
};
</script>
图标可以去阿里矢量图标库下载png
折线组件 newPolyline.vue
<script>
/**
* 注意此处三个引入路径
* 在源文件中使用的是相对路径
* 但是因为现在是自定义组件,所以要重新调整路径
*/
import commonMixin from "vue-baidu-map/components/base/mixins/common.js";
import bindEvents from "vue-baidu-map/components/base/bindEvent.js";
import { createPoint } from "vue-baidu-map/components/base/factory.js";
export default {
// 起一个新名字
name: "new-polyline",
render() {},
mixins: [commonMixin("overlay")],
props: {
path: {
type: Array
},
// 新声明一个icons
icons: {
type: Array
},
strokeColor: {
type: String
},
strokeWeight: {
type: Number
},
strokeOpacity: {
type: Number
},
strokeStyle: {
type: String
},
massClear: {
type: Boolean,
default: true
},
clicking: {
type: Boolean,
default: true
},
editing: {
type: Boolean,
default: false
}
},
watch: {
path: {
handler(val, oldVal) {
this.reload();
},
deep: true
},
strokeColor(val) {
this.originInstance.setStrokeColor(val);
},
strokeOpacity(val) {
this.originInstance.setStrokeOpacity(val);
},
strokeWeight(val) {
this.originInstance.setStrokeWeight(val);
},
strokeStyle(val) {
this.originInstance.setStrokeStyle(val);
},
editing(val) {
val
? this.originInstance.enableEditing()
: this.originInstance.disableEditing();
},
massClear(val) {
val
? this.originInstance.enableMassClear()
: this.originInstance.disableMassClear();
},
clicking(val) {
this.reload();
}
},
methods: {
load() {
const {
BMap,
map,
path,
// 参数解构 加入icons
icons,
strokeColor,
strokeWeight,
strokeOpacity,
strokeStyle,
editing,
massClear,
clicking
} = this;
const overlay = new BMap.Polyline(
path.map(item =>
createPoint(BMap, {
lng: parseFloat(item.lng),
lat: parseFloat(item.lat)
})
),
{
strokeColor,
strokeWeight,
strokeOpacity,
strokeStyle,
// 配置icons
icons,
enableEditing: editing,
enableMassClear: massClear,
enableClicking: clicking
}
);
this.originInstance = overlay;
map.addOverlay(overlay);
bindEvents.call(this, overlay);
}
}
};
</script>
效果图