vue-baidu-map-3x 鼠标绘制

Vue-Baidu-Map-3x是一个基于Vue.js的百度地图组件封装库，它简化了在Vue应用中集成百度地图的功能。鼠标绘制功能通常指的是`BMap.PolyEditor`，这是一个允许用户通过点击、拖拽等方式实时绘制路径（如折线或多边形）的工具。

在使用vue-baidu-map-3x时，你可以按照以下步骤来实现鼠标绘制：

1. 安装并引入组件：首先需要安装`vue-baidu-map`库，然后在Vue实例中导入地图和编辑器组件。

import { BMap, PolyEditor } from 'vue-baidu-map';

2. 创建地图实例：在Vue组件的data中配置地图信息，并在模板中挂载到元素上。

<template>
  <bmap :center="center" :zoom="zoom">
    <!-- 其他地图组件 -->
    <poly-editor v-model="polyLine"></poly-editor>
  </bmap>
</template>

<script>
export default {
  data() {
    return {
      center: [116.404, 39.915], // 北京坐标
      zoom: 11,
      polyLine: [], // 存储绘制的路径数据
    };
  },
};
</script>

3. 监听编辑器事件：添加监听`polyeditor.change`事件，在该事件中获取绘制完成后的路径数据。

mounted() {
  this.$refs.map.addEventListener('polyeditor.change', (e) => {
    this.polyLine = e.result; // 更新polyLine数据
  });
},