vue-baidu-map 写一个最短路径导航页面

要使用 vue-baidu-map 实现最短路径导航页面，你需要先在项目中安装 vue-baidu-map。

1. 在 main.js 中引入 vue-baidu-map 并注册：

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

Vue.use(BaiduMap, {
  ak: '你的百度地图AK'
})

2. 创建一个地图组件：

<template>
  <div class="map-container">
    <baidu-map
      :center="center"
      :zoom="zoom"
      @click="handleMapClick"
    >
      <bm-marker :position="startPoint" :title="'起点'"></bm-marker>
      <bm-marker :position="endPoint" :title="'终点'"></bm-marker>
      <bm-navigation :start-point="startPoint" :end-point="endPoint" :city="city" :auto-view="true"></bm-navigation>
    </baidu-map>
  </div>
</template>

<script>
export default {
  data() {
    return {
      center: { lng: 116.404, lat: 39.915 },
      zoom: 15,
      startPoint: { lng: 116.404, lat: 39.915 },
      endPoint: { lng: 116.417, lat: 39.909 },
      city: '北京'
    }
  },
  methods: {
    handleMapClick({ point }) {
      this.endPoint = point
    }
  }
}
</script>

3. 在组件中使用 bm-navigation 组件实现最短路径导航，同时也可以在组件中监听地图的点击事件，动态修改终点位置。

这样，你就可以使用 vue-baidu-map 实现一个最短路径导航页面了。当然，这只是一个简单的实现，你可以根据自己的需求进行更多的定制。