vue中使用高德地图渲染多个不同类型的点，根据勾选数据 类型不同打点显示隐藏

一、在index.html文件中引入高德地图JavaScript API的2.0版本SDK

<script src="https://webapi.amap.com/maps?v=2.0&key=你的高德地图Key"></script>

二、创建一个Vue组件，用于渲染地图和点位

html
<template>
  <div class="map-container">
    <div id="map" class="map"></div>
    <div class="checkbox-container">
      <label v-for="(type, index) in types" :key="index">
        <input type="checkbox" :value="type" v-model="selectedTypes" @change="toggleMarkers">
        {{ type }}
      </label>
    </div>
  </div>
</template>

<script>
export default {
  name: "PointMap",
  data() {
    return {
      map: null,
      markers: [],
      types: ["类型1", "类型2", "类型1"], // 点位类型列表
      selectedTypes: [], // 选中的点位类型
    };
  },
  mounted() {
    this.initMap();
    this.createMarkers();
  },
  methods: {
    initMap() {
      this.map = new AMap.Map("map", {
        center: [116.397428, 39.90923],
        zoom: 11,
      });
    },
    createMarkers() {
      const data = [
        { lng: 116.405285, lat: 39.904989, type: "类型1" },
        { lng: 116.418162, lat: 39.931711, type: "类型2" },
        { lng: 116.418162, lat: 39.931711, type: "类型1" },
      
      ];

      data.forEach((item) => {
        const marker = new AMap.Marker({
          position: [item.lng, item.lat],
          map: this.map,
          content: item.type,
        });

        marker.type = item.type; // 将点位类型保存在marker对象的type属性中
        this.markers.push(marker);
      });
    },
    toggleMarkers() {
      this.markers.forEach((marker) => {
        if (this.selectedTypes.includes(marker.type)) {
          marker.show();
        } else {
          marker.hide();
        }
      });
    },
  },
};
</script>

<style>
.map-container {
  height: 500px;
}
.map {
  height: 100%;
}
.checkbox-container {
  margin-top: 10px;
}
</style>