vue3 百度地图 路书代码

抱歉，我之前的回答有误。以下是 Vue3 百度地图路书代码：

<template>
  <div class="map-container">
    <div ref="map" class="map"></div>
  </div>
</template>

<script>
import { onMounted, ref } from 'vue';
import BMapLoader from '@/utils/BMapLoader';

export default {
  name: 'BaiduMap',
  setup() {
    const map = ref(null);
    const routePath = [
      new BMap.Point(116.404, 39.915),
      new BMap.Point(116.404, 39.925),
      new BMap.Point(116.414, 39.925),
      new BMap.Point(116.414, 39.935),
    ];

    onMounted(() => {
      BMapLoader.load().then(() => {
        map.value = new BMap.Map('map');
        map.value.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
        const polyline = new BMap.Polyline(routePath, { strokeColor: 'blue', strokeWeight: 6, strokeOpacity: 0.5 });
        map.value.addOverlay(polyline);
        map.value.setViewport(routePath);
      });
    });

    return {
      map,
    };
  },
};
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 100%;
}

.map {
  width: 100%;
  height: 100%;
}
</style>

解释：以上代码是一个 Vue3 的百度地图路书示例，通过引入 `BMapLoader` 工具类加载百度地图 API，然后在 `onMounted` 钩子函数中初始化地图，并添加路线和视野范围。