Echarts+vue-baidu-map绘制行驶路线

依赖下载

首先要在Vue项目中结合vue-baidu-map和ECharts绘制行驶路线，需要先安装并导入相关的库

npm install vue-baidu-map echarts --save

注册引入

Echarts引入详情 官网查看

import * as echarts from 'echarts';

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
});

vue-baidu-map引入详情 官网查看
在vue.config.js文件中

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'YOUR_APP_KEY'
})

到这里我们的准备工作就完成了下面开始上代码

核心代码

<template>
  <baidu-map class="map" @ready="handler">
    <div class="echarts" :style="{width: '100%', height: '100%'}">
      <div ref="chart" :style="{width: '100%', height: '100%'}"></div>
    </div>
  </baidu-map>
</template>
 
<script>
import BaiduMap from 'vue-baidu-map/components/Map/Map.vue'
import * as echarts from 'echarts'
 
export default {
  components: {
    BaiduMap
  },
  data() {
    return {
      chartInstance: null,
      map: null
    }
  },
  methods: {
    handler({ BMap, map }) {
      this.map = map
      this.initChart()
      // 假设你已经有了行驶路线的数据
      const drivingPath = [] //经纬度点数组
      this.drawDrivingPath(drivingPath)
    },
    initChart() {
      this.chartInstance = echarts.init(this.$refs.chart)
      const option = {
        // ECharts 配置项
      }
      this.chartInstance.setOption(option)
    },
    drawDrivingPath(path) {
      if (this.chartInstance) {
        const series = {
          type: 'lines',
          coordinateSystem: 'BD_09', // 使用百度地图坐标系
          data: path.map(point => [point.lng, point.lat])
          // 其他配置项
        }
        this.chartInstance.setOption({ series: [series] })
      }
    }
  }
}
</script>
 
<style>
.map {
  width: 100%;
  height: 80%;
}
.echarts {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>

在上述代码中，我们在模板中引入了baidu-map组件，并在其上添加了一个用于ECharts的div容器。在handler方法中，我们获取了百度地图实例，并初始化了ECharts实例。然后，我们假设有行驶路线的数据，通过drawDrivingPath方法将路线绘制在地图上。
请注意，如果你已经有了行驶路线的数据和const series = {...}中的注释部分，你需要替换路线数据和ECharts的配置项。