vue使用百度地图根据起终点经纬度驾车导航

百度地图api官方：https://lbsyun.baidu.com/jsdemo.htm#i5_2

接口返回数据

transportVo: {
endCoordinate: "113.631115,37.895247"
startCoordinate: "120.157733,30.278785"
}

index.html引入百度地图

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script>

<template>
  <div class="transportInfo">
    <div id="map"></div>
    <div class="collapse">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="运输详情" name="1">
          <div class="transportHead">
            <div class="img"><img src="@/assets/images/sj.png" /></div>
            <div>
              <div>
                <span class="label">运输人员：</span
                ><span class="value">{{ detailInfo.carManName }}</span>
              </div>
              <div>
                <span class="label1">{{ detailInfo.carNo }}</span
                ><span class="value1">{{ detailInfo.statusName }}</span>
              </div>
            </div>
          </div>
          <div class="timeline">
            <el-timeline>
              <el-timeline-item
                v-for="(activity, index) in detailInfo.roamVos"
                :key="index"
                :timestamp="activity.date"
                :color="activity.color"
                placement="top"
              >
                <span style="color: rgba(12, 111, 255, 1)">{{
                  activity.userName
                }}</span>
                <span style="color: rgba(26, 26, 26, 1)">{{
                  activity.transportName
                }}</span>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>
 
<script>
export default {
  computed: {},
  props: ["detailInfo"],
  data() {
    return {
      activeNames: ["1"],
    };
  },
  mounted() {
    // 百度地图API功能
    const startCoordinate =
      this.detailInfo.transportVo.startCoordinate.split(",");
    const endCoordinate = this.detailInfo.transportVo.endCoordinate.split(",");
    var map = new BMap.Map("map");//创建地图实例	
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 6);//设置中心坐标及默认缩放级别
    //以上是必要，否则不显示地图
    var p1 = new BMap.Point(startCoordinate[0], startCoordinate[1]);//起点经纬度
    var p2 = new BMap.Point(endCoordinate[0], endCoordinate[1]);//终点经纬度
    // 建立导航路线可视化
    var driving = new BMap.DrivingRoute(map, {
      renderOptions: { map: map, autoViewport: true },
    }); //autoViewport: true  自动调整视野
    driving.search(p1, p2);
  },
  methods: {},
};
</script>
 
 <style lang="less" scoped>
.transportInfo {
  padding: 0px 16px 16px 16px;
  // background-color: #ccc;
  position: relative;
  #map {
    width: 100%;
    height: calc(100vh - 220px);
  }
  .collapse {
    .el-collapse {
      position: absolute;
      top: 32px;
      left: 32px;
      width: 314px;
      border-radius: 2px;
      background: rgba(255, 255, 255, 1);

      /deep/.el-collapse-item__content {
        padding-bottom: 0px !important;
      }
      /deep/.el-collapse-item__header::before {
        content: "";
        width: 4px;
        height: 16px;
        background: rgba(12, 111, 255, 1);
        margin-right: 8px;
        margin-left: 14px;
      }
      /deep/.el-collapse-item__header {
        font-size: 14px;
        font-weight: 700;
        color: rgba(26, 26, 26, 1);
        .el-collapse-item__arrow.el-icon-arrow-right {
          color: rgba(25.5, 25.5, 25.5, 1);
        }
      }
      .transportHead {
        display: flex;
        margin-left: 14px;
        .img {
          margin-right: 8px;
        }
        .label {
          font-size: 14px;
          font-weight: 400;
          line-height: 22px;
          color: rgba(26, 26, 26, 1);
        }
        .value {
          font-size: 14px;
          font-weight: 400;
          line-height: 22px;
          color: rgba(102, 102, 102, 1);
        }
        .label1 {
          border-radius: 2px;
          background: rgba(242, 247, 255, 1);
          border: 1px solid rgba(217, 217, 217, 1);
          font-size: 12px;
          font-weight: 700;
          line-height: 22px;
          color: rgba(26, 26, 26, 1);
          padding: 2px 4px;
          margin-right: 6px;
        }
        .value1 {
          border-radius: 2px;
          background: rgba(255, 141, 26, 0.1);
          padding: 4px 8px 4px 8px;
          font-size: 14px;
          font-weight: 400;
          color: rgba(255, 141, 26, 1);
        }
      }
      .timeline {
        margin: 16px;
        padding: 16px 0 0 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 2px;
        width: 282px;
        background: rgba(242, 247, 255, 1);
      }
    }
  }
}
</style>```