vue3 vue-baidu-map

### 如何在 Vue 3 中使用 `vue-baidu-map` 集成百度地图

#### 安装依赖包
为了能够在 Vue 3 项目中集成百度地图，首先需要安装必要的依赖库。可以通过 npm 或 yarn 来安装这些依赖。

npm install vue-baidu-map@next --save

或者

yarn add vue-baidu-map@next

此命令会安装最新版本的 `vue-baidu-map` 库[^1]。

#### 创建并配置应用实例
接下来，在项目的入口文件（通常是 main.js 或者 app.ts）里引入并注册插件：

import { createApp } from 'vue';
import App from './App.vue';
import BaiduMap from "vue-baidu-map";

const app = createApp(App);

app.use(BaiduMap, {
    ak: '您的API密钥' // 替换成自己的百度地图开发者AK
});

app.mount('#app');

这段代码完成了对 `vue-baidu-map` 插件的基础配置，并将其挂载到全局上下文中以便后续组件可以直接调用。

#### 使用 `<baidu-map>` 组件展示基础地图
现在可以在任何页面或组件内部通过如下方式来创建一个简单的百度地图视图:

<template>
  <div id="map-container">
      <!-- 百度地图容器 -->
      <baidu-map class="bm-view"></baidu-map>
  </div>
</template>

<script setup lang="ts">
// 导入样式表 (可选)
import 'vue-baidu-map/services/lib/style.css';

<style scoped>
.bm-view{
  width: 100%;
  height: 50vh;
}
</style>

上述模板定义了一个名为 `#map-container` 的 div 元素作为地图承载区域，并设置了固定的高度和宽度以确保地图能够正常显示出来。

#### 添加更多功能——绘制带箭头的折线
如果想要实现更复杂的功能比如带有方向指示器(即箭头)的路径规划，则可以按照下面的方式操作：

<baidu-map @ready="handleReady" :center="{lng: lngValue, lat: latValue}" style="height:80%">
  <bm-polyline :path="polylinePath" stroke-color="#ffcc00" :stroke-opacity="0.7" :icons="state.mapArgument.iconsArr"/>
</baidu-map>

setup() {
  const state = reactive({
    mapArgument:{
        iconsArr:[]
    }
  });

  function handleReady({BMap}) {
     state.mapArgument.iconsArr = [{
         symbol: new BMap.Symbol(
             BMap_Symbol_SHAPE_FORWARD_CLOSED_ARROW,
              {
                  scale: 0.6,
                  rotation: 90,
                  anchor:new BMap.Size(20, 20),
                  fillColor:'#FFCC00',
                  fillOpacity:1,
                  strokeWeight:2,
                  strokeColor:"#FFFFFF"
               }),
          offset:"10",
          repeat:"30"
       }];
   }

return {...toRefs(state), handleReady};
},
data(){
  return {
    polylinePath:[
      {lng:116.404,lat:39.915},{lng:116.414,lat:39.925},{lng:116.424,lat:39.935} // 示例坐标点集合
    ],
    lngValue:116.404,// 地图中心经度
    latValue:39.915 // 地图中心纬度
  };
}

这里展示了如何利用 `bm-polyline` 和 `Symbol` 类型对象来自定义线条上的标记物，从而达到可视化路线的效果[^3].