vue3和ts上绑定一个按钮点击移除leaflet多个maker标记，再次点击显示标记

在 Vue3 中，你可以通过绑定一个按钮的点击事件来移除和显示 Leaflet 地图上的多个 Marker 标记。

首先，在 Vue3 组件中维护一个 markers 数组，其中包含所有需要添加到 Leaflet 地图上的 Marker 实例。然后，你可以在按钮的点击事件中根据 markers 数组是否为空来判断是否需要移除或显示标记。

示例代码如下：

<template>
  <div>
    <button @click="toggleMarkers">{{ showMarkers ? 'Hide' : 'Show' }} Markers</button>
    <div ref="map" style="height: 500px;"></div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-class-component';
import { Map, Marker } from 'leaflet';

@Component
export default class MyComponent extends Vue {
  private map: Map | null = null; // Leaflet 地图实例
  private markers: Marker[] = []; // Marker 数组
  private showMarkers = true; // 是否显示 Marker 标记

  mounted() {
    // 初始化 Leaflet 地图
    this.map = new Map(this.$refs.map as HTMLElement).setView([51.505, -0.09], 13);

    // 添加 Marker 标记
    this.addMarker(51.5, -0.09);
    this.addMarker(51.51, -0.1);
    this.addMarker(51.49, -0.1);
  }

  // 添加 Marker 标记
  addMarker(lat: number, lng: number) {
    const marker = new Marker([lat, lng]);
    marker.addTo(this.map as Map);
    this.markers.push(marker);
  }

  // 移除所有 Marker 标记
  removeAllMarkers() {
    for (const marker of this.markers) {
      marker.remove();
    }
    this.markers = [];
  }

  // 切换 Marker 标记的显示状态
  toggleMarkers() {
    if (this.showMarkers) {
      this.removeAllMarkers();
      this.showMarkers = false;
    } else {
      this.addMarker(51.5, -0.09);
      this.addMarker(51.51, -0.1);
      this.addMarker(51.49, -0.1);
      this.showMarkers = true;
    }
  }
}
</script>

在上面的代码中，toggleMarkers 方法用于切换 Marker 标记的显示状态。如果 showMarkers 为 true，表示当前显示了 Marker 标记，则调用 removeAllMarkers 方法移除所有 Marker 标记，并将 showMarkers 设置为 false。如果 showMarkers 为 false，表示当前没有显示 Marker 标记，则调用 addMarker 方法添加多个 Marker 标记，并将 showMarkers 设置为 true。

在模板中，绑定一个按钮的点击事件到 toggleMarkers 方法，并根据 showMarkers 的值来显示或隐藏 Marker 标记。