vue 高德地图 点击按钮 缩小当前图层

你可以在 Vue 中使用高德地图的 JavaScript API，在点击按钮时调用地图对象的 `zoomOut` 方法来缩小当前地图的层级。

以下是一个简单的示例：

1. 首先在 Vue 组件中引入高德地图的 JavaScript API：

<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>

2. 在 `mounted` 钩子函数中初始化地图对象：

mounted() {
  // 初始化地图对象
  this.map = new AMap.Map("mapContainer", {
    zoom: 11, // 初始层级
    center: [116.397428, 39.90923], // 初始中心点坐标
  });
},

3. 在模板中添加一个按钮，并绑定点击事件：

<template>
  <div>
    <div id="mapContainer" style="height: 400px;"></div>
    <button @click="zoomOut">缩小地图</button>
  </div>
</template>

4. 在 Vue 组件中定义 `zoomOut` 方法，调用地图对象的 `zoomOut` 方法：

methods: {
  zoomOut() {
    this.map.zoomOut(); // 缩小地图层级
  },
},

这样，当点击按钮时，就会缩小当前地图的层级。你可以根据实际需求来修改初始层级和中心点坐标。