vue-baidu-map标记点

在 Vue 中使用百度地图进行标记点可以按照以下步骤进行：

1. 首先，安装 `vue-baidu-map` 插件。可以使用 npm 或者 yarn 进行安装：

npm install vue-baidu-map

2. 在需要使用地图的组件中，导入 `vue-baidu-map`：

import BaiduMap from 'vue-baidu-map'

3. 在组件的 `components` 属性中注册 `BaiduMap` 组件：

components: {
  BaiduMap
},

4. 在模板中使用 `BaiduMap` 组件，并设置相关属性：

<template>
  <div>
    <BaiduMap :ak="YOUR_API_KEY" :center="center" :zoom="zoom">
      <!-- 在这里添加标记点 -->
      <BmMarker :position="markerPosition"></BmMarker>
    </BaiduMap>
  </div>
</template>

其中，`:ak` 是你的百度地图 API 密钥，`:center` 是地图的中心点经纬度，`:zoom` 是地图的缩放级别。

5. 在组件的 `data` 属性中定义相关数据：

data() {
  return {
    YOUR_API_KEY: 'YOUR_API_KEY',
    center: { lng: 116.404, lat: 39.915 }, // 设置地图中心点经纬度
    zoom: 15, // 设置地图缩放级别
    markerPosition: { lng: 116.404, lat: 39.915 } // 设置标记点经纬度
  }
}

确保将 `YOUR_API_KEY` 替换为你的百度地图 API 密钥。

6. 在 `BmMarker` 组件中，你可以设置标记点的样式和事件。例如，设置自定义图标和点击事件：

<BmMarker :position="markerPosition" :options="markerOptions" @click="handleMarkerClick"></BmMarker>

data() {
  return {
    markerOptions: {
      icon: new BMap.Icon('path/to/your/icon.png', new BMap.Size(20, 32))
    }
  }
},
methods: {
  handleMarkerClick(marker) {
    // 处理标记点点击事件
  }
}

这样，你就可以在 Vue 中使用百度地图进行标记点了。记得在百度地图开放平台申请 API 密钥，并将密钥替换到代码中的 `YOUR_API_KEY` 处。