vue 使用vue-baidu-map BmMarker

### 如何在 Vue 中使用 `vue-baidu-map` 的 `BmMarker` 组件 #### 参数说明 `BmMarker` 是用于在百度地图上标记点的组件。以下是其主要参数及其作用： | 参数名 | 类型 | 描述 | |--------|------|------| | position | Object | 标记点的地理位置，需指定 `{lng: Number, lat: Number}` 形式的经纬度对象[^1]。 | | icon | Object | 自定义图标配置项，支持设置图片路径、大小等属性[^5]。 | | title | String | 鼠标悬停时显示的文字提示信息[^4]。 | | draggable | Boolean | 是否允许拖拽该标记点，默认为 `false`。 | #### 示例代码 以下是一个完整的示例，展示如何在 Vue 项目中使用 `BmMarker`。 ```html <template> <baidu-map :center="{ lng: state.mapCenter.lng, lat: state.mapCenter.lat }" :zoom="state.mapZoom" class="map"> <!-- 添加一个 BmMarker --> <bm-marker :position="{lng: state.markerPosition.lng, lat: state.markerPosition.lat}" :icon="state.iconOptions" :title="state.markerTitle" :dragging="true" /> </baidu-map> </template> <script> import { reactive } from 'vue'; export default { setup() { const state = reactive({ mapCenter: { lng: 116.404, lat: 39.915 }, // 地图中心坐标 mapZoom: 15, // 缩放级别 markerPosition: { lng: 116.404, lat: 39.915 }, // 标记点位置 markerTitle: '这是一个标记', // 提示文字 iconOptions: { // 自定义图标选项 url: require('@/assets/marker.png'), // 图片路径 (本地资源需用 require 加载) size: { width: 32, height: 32 }, // 图像尺寸 opts: { anchor: { width: 16, height: 32 }, // 锚点位置 imageOffset: { width: 0, height: 0 }, // 偏移量 } }, }); return { state }; } }; </script> <style scoped> .map { width: 100%; height: 500px; } </style> ``` 上述代码展示了如何通过 `BmMarker` 创建一个可拖动的地图标记，并为其设置了自定义图标和鼠标悬浮提示文字。 --- #### 注意事项 1. **API 密钥** 在初始化地图前，需要确保已在项目的入口文件（如 `main.js`）中正确引入并注册插件，同时提供有效的 API Key。 ```javascript import BaiduMap from 'vue2-baidu-map'; Vue.use(BaiduMap, { ak: '您的AK' }); ``` 2. **自定义图标路径** 如果使用的是本地图片作为标记图标，则需要通过 `require()` 方法加载图片资源；如果是网络图片，则可以直接填写 URL。 3. **版本兼容性** 若遇到功能异常或样式问题，请确认所使用的 `vue-baidu-map` 版本与文档匹配。必要时可以调整依赖库版本或修改底层调用逻辑[^2]。 --- ###