vue 高德多条轨迹
时间: 2023-11-16 21:59:55 浏览: 80
在Vue中使用高德地图绘制多条轨迹,可以通过以下步骤实现:
1. 引入高德地图和VueAMap插件,并进行全局配置。
2. 在Vue组件中使用VueAMap组件,并设置地图的key和插件。
3. 在Vue组件中定义多条轨迹的数据,可以使用模拟数据或者从后端获取。
4. 在Vue组件中使用高德地图提供的Polyline组件,循环渲染多条轨迹。
具体实现步骤如下:
1. 在main.js中引入高德地图和VueAMap插件,并进行全局配置:
```
import VueAMap from 'vue-amap'
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
key: 'your amap key',
plugin: ['AMap.PolyEditor', 'AMap.MarkerClusterer', 'AMap.Geolocation']
})
```
2. 在Vue组件中使用VueAMap组件,并设置地图的key和插件:
```
<template>
<div>
<el-amap :zoom="zoom" :center="center" :plugin="plugin" :key="key">
<el-amap-polyline v-for="(item, index) in lines" :key="index" :path="item.path" :style="lineStyle"></el-amap-polyline>
</el-amap>
</div>
</template>
<script>
export default {
data() {
return {
key: 'your amap key',
zoom: 10,
center: [116.397428, 39.90923],
plugin: ['AMap.PolyEditor', 'AMap.MarkerClusterer', 'AMap.Geolocation'],
lines: [
{
name: '城配线路1',
path: [
[100.340417, 27.376994],
[101.226354, 33.827452],
[101.392174, 34.208439],
[102.905846, 35.232876]
],
pathNodeName: ['城配a', '城配b', '城配c', '城配d']
},
{
name: '城配线路2',
path: [
[100.340417, 27.376994],
[107.424376, 27.222793],
[113.753046, 30.046619],
[118.058013, 34.970313]
],
pathNodeName: ['城配a', '城配e', '城配f', '城配g']
}
],
lineStyle: {
strokeColor: '#FF33FF',
strokeOpacity: 0.8,
strokeWeight: 6,
strokeStyle: 'solid'
}
}
}
}
</script>
```
3. 在Vue组件中定义多条轨迹的数据,可以使用模拟数据或者从后端获取。
4. 在Vue组件中使用高德地图提供的Polyline组件,循环渲染多条轨迹。