百度地图API根据经纬度绘制轨迹图（Vue附源码）

有用可以点个关注，收藏！！

vue版本百度地图官方组件：https://dafrok.github.io/vue-baidu-map/#/zh/start/usage
这里不是使用的这种办法，个人感觉不是很完整，需要的自己研究下。

导入百度地图

importBaiduMap () {
  var script = document.createElement('script');
  script.src = 'https://api.map.baidu.com/api?v=2.0&ak=MzjWwp5rZDjfjo9sM2EqgTCoOIVxOI03&setLang=en&callback=loadBaiduMap';
  document.body.appendChild(script);
  //完全载入后执行
  window.loadBaiduMap = () => {
    window.baiduMap = new BMap.Map('rightBox'); //找到页面id 绘制地图
    window.baiduMap.addControl(new BMap.NavigationControl());
    window.baiduMap.centerAndZoom(new BMap.Point(70.0225, 40.027222), 3); //设置默认中心点
    window.baiduMap.enableScrollWheelZoom(); //允许滚轮缩放
    this.drawBaiduMap(); //绘制点
  };
},

绘制轨迹

    //绘制点
    drawBaiduMap () {
      let trainIcon = 'https://www.aliboxx.com/uploadfile/static/icons/train.png';
      if (this.list.length > 0) {
        window.baiduMap.centerAndZoom(new BMap.Point(this.list[0].lng, this.list[0].lat), 6);  //取第一个点为地图中心点
        //画路线部分
        let pointsArray = [];
        const list = this.list;
        list.forEach(item => {
          console.log(item, 'item')
          pointsArray.push(new BMap.Point(item.lng, item.lat)); //添加每一个点
        });
        let polyline = new BMap.Polyline(pointsArray, {
          strokeColor: '#5352ed',    //轨迹的样式
          strokeWeight: 3,
          strokeOpacity: 1.0,
        });
        window.baiduMap.addOverlay(polyline);

        //标注起点窗口信息
        let opts = {
          width: 100, // 信息窗口宽度
          // height: 60,     // 信息窗口高度
        };
        let contentString = `<div>第一个位置鼠标移动上去的信息</div>`;
        let infoWindow = new BMap.InfoWindow(contentString, opts); // 创建信息窗口对象
        let nowPoint = new BMap.Point(list[0].lng, list[0].lat);  //设置图标的位置
        let nowIcon = new BMap.Icon(trainIcon, new BMap.Size(32, 32));
        nowIcon.setImageSize(new BMap.Size(25, 25)); //设置图标大小
        let nowPort = new BMap.Marker(nowPoint, { icon: nowIcon });

        nowPort.addEventListener('mouseover', function () { //鼠标移动上去事件
          window.baiduMap.openInfoWindow(infoWindow, nowPoint);
        });
        nowPort.addEventListener('mouseout', function () { //移开清除
          window.baiduMap.closeInfoWindow(infoWindow, nowPoint);
        });
        window.baiduMap.addOverlay(nowPort);
      }
    },

左侧点击事件添加窗口

    clickInfo (row) {
      console.log(row, 'row')
      if (window.baiduMap) {//如果当前渲染的是百度地图
        let opts = {
          width: 250, // 信息窗口宽度
          // height: 100,     // 信息窗口高度
        };
        let contentString = `<div><p>点${row.lng},${row.lat}</p></div>`;
        let infoWindow = new BMap.InfoWindow(contentString, opts); // 创建信息窗口对象
        window.baiduMap.openInfoWindow(infoWindow, new BMap.Point(row.lng, row.lat)); // 打开信息窗口
      }
    }

页面完整代码

<template>
  <div class="page">
    <el-row type="flex" justify="center">
      <el-col :span="6">
        <el-input v-model="gpsNum" placeholder="请输入内容" size="small"></el-input>
      </el-col>
      <el-col :span="1">
        <el-button icon="el-icon-search" type="primary" size="small" style="margin:0 15px" @click="getList()">搜索
        </el-button>
      </el-col>
    </el-row>
    <el-row type="flex" class="mapBox" justify="center" :gutter="20">
      <el-col :span="8">
        <div class="leftBox">
          <el-table :data="list" style="width: 100%" @row-click="clickInfo">
            <el-table-column type="index" label="序号" width="50" align="center">
            </el-table-column>
            <el-table-column label="经纬度" align="center">
              <template slot-scope="scope">
                {{scope.row.lng}},{{scope.row.lat}}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="16">
        <div id="rightBox" class="rightBox"></div>
      </el-col>
    </el-row>
  </div>
</template>
 
<script>
export default {
  name: "demo",
  data () {
    return {
      gpsNum: '',
      list: [],
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      //创建虚拟数据
      for (let i = 0; i < 50; i++) {
        this.list.push({
          lng: i + Math.round(Math.random()) + 5,
          lat: 10 + i
        })
      }
      this.importBaiduMap()   //引入百度地图（如果是异步获取数据的话 要先拿到数据在初始化 地图api）
    },
    importBaiduMap () {
      var script = document.createElement('script');
      script.src = 'https://api.map.baidu.com/api?v=2.0&ak=MzjWwp5rZDjfjo9sM2EqgTCoOIVxOI03&setLang=en&callback=loadBaiduMap';
      document.body.appendChild(script);
      //完全载入后执行
      window.loadBaiduMap = () => {
        window.baiduMap = new BMap.Map('rightBox'); //找到页面id 绘制地图
        window.baiduMap.addControl(new BMap.NavigationControl());
        window.baiduMap.centerAndZoom(new BMap.Point(70.0225, 40.027222), 3); //设置默认中心点
        window.baiduMap.enableScrollWheelZoom(); //允许滚轮缩放
        this.drawBaiduMap(); //绘制点
      };

    },

    //绘制点
    drawBaiduMap () {
      let trainIcon = 'https://www.aliboxx.com/uploadfile/static/icons/train.png';
      if (this.list.length > 0) {
        window.baiduMap.centerAndZoom(new BMap.Point(this.list[0].lng, this.list[0].lat), 6);  //取第一个点为地图中心点
        //画路线部分
        let pointsArray = [];
        const list = this.list;
        list.forEach(item => {
          console.log(item, 'item')
          pointsArray.push(new BMap.Point(item.lng, item.lat)); //添加每一个点
        });
        let polyline = new BMap.Polyline(pointsArray, {
          strokeColor: '#5352ed',    //轨迹的样式
          strokeWeight: 3,
          strokeOpacity: 1.0,
        });
        window.baiduMap.addOverlay(polyline);

        //标注起点窗口信息
        let opts = {
          width: 100, // 信息窗口宽度
          // height: 60,     // 信息窗口高度
        };
        let contentString = `<div>第一个位置鼠标移动上去的信息</div>`;
        let infoWindow = new BMap.InfoWindow(contentString, opts); // 创建信息窗口对象
        let nowPoint = new BMap.Point(list[0].lng, list[0].lat);  //设置图标的位置
        let nowIcon = new BMap.Icon(trainIcon, new BMap.Size(32, 32));
        nowIcon.setImageSize(new BMap.Size(25, 25)); //设置图标大小
        let nowPort = new BMap.Marker(nowPoint, { icon: nowIcon });

        nowPort.addEventListener('mouseover', function () { //鼠标移动上去事件
          window.baiduMap.openInfoWindow(infoWindow, nowPoint);
        });
        nowPort.addEventListener('mouseout', function () { //移开清除
          window.baiduMap.closeInfoWindow(infoWindow, nowPoint);
        });
        window.baiduMap.addOverlay(nowPort);
      }
    },
    clickInfo (row) {
      console.log(row, 'row')
      if (window.baiduMap) {//如果当前渲染的是百度地图
        let opts = {
          width: 250, // 信息窗口宽度
          // height: 100,     // 信息窗口高度
        };
        let contentString = `<div><p>点${row.lng},${row.lat}</p></div>`;
        let infoWindow = new BMap.InfoWindow(contentString, opts); // 创建信息窗口对象
        window.baiduMap.openInfoWindow(infoWindow, new BMap.Point(row.lng, row.lat)); // 打开信息窗口
      }
    }
  }
}
</script>
 
<style lang="scss" scoped >
.page {
  background: #fafafa;
  //   height: 100vh;
  padding-top: 30px;
  .mapBox {
    width: 1600px;
    margin: 30px auto 0 auto !important;
    .leftBox {
      width: 100%;
      height: 600px;
      margin-right: 30px;
      background: #ffffff;
      overflow-y: scroll;
    }
    .rightBox {
      width: 100%;
      height: 600px;
    }
  }
}
</style>