vue的高德地图添加mousetool

Vue.js结合高德地图（AMap）可以方便地在项目中集成地图功能。要在Vue组件中添加鼠标工具（如缩放、平移等），你可以使用`amap.AMap.MouseTool`。以下是简单的步骤：

1. 首先，确保已经安装了Vue-Amap插件，可以参考官方文档进行安装：https://github.com/hanzichi/vue-amap

2. 在你的Vue组件中引入AMap并注册地图实例：

<template>
  <div ref="container" style="height: 500px; width: 100%;"></div>
</template>

<script>
import { AMap, AMapUI } from 'vue-amap';

export default {
  components: {
    AMap,
    AMapUI,
  },
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const container = this.$refs.container;
      const map = new AMap.Map(container, {
        zoom: 11, // 初始缩放级别
        center: [116.404, 39.915], // 北京坐标
        plugins: ['AMap.ToolBar'] // 加入鼠标工具栏
      });
      map.setZoomAndCenter(11, [116.404, 39.915]); // 初始化显示地图
      this.map = map;
    }
  },
};
</script>

3. 在模板中，我们加入了`AMap.UI`组件，它会自动加载鼠标工具和其他UI元素。

现在，你应该可以在地图上看到鼠标工具栏，包括缩放和平移按钮。你可以通过监听地图实例的事件来响应用户的交互。