@ -1,235 +0,0 @@
<template>
  <div class="map-container">
    <el-amap ref="map" :amap-manager="amapManager" :vid="'map-marker-list-view'" :zoom="mergedMapConfig.zoom"
      :zooms="mergedMapConfig.zooms" :center="mergedMapConfig.center" :mapStyle="mergedMapConfig.mapStyle"
      :features="mergedMapConfig.features" :viewMode="mergedMapConfig.viewMode" :pitch="mergedMapConfig.pitch"
      :events="mapEvents">
      <!-- 批量打点 -->
      <el-amap-marker v-for="(item, index) in markerList" :key="index" :position="item.position" :events="markerEvents"
        :extData="item">
        <!-- 用插槽做自定义图标（纯css多边形，背景图，或者图文混排都可以） -->
        <div class="slot-wrapper">
          <img class="slot-img" :src="item.icon || defaultIcon" alt="" />
          <div class="slot-label">{{ item.label || item.title }}</div>
        </div>
      </el-amap-marker>
    </el-amap>
    <!-- 信息弹窗-----因为标题和宽度内容样式等差异过大，不提供默认弹框，只$emit事件 -->
  </div>
</template>

<script>
/* *
 * MapMarkerListView 是一个地图批量打点加弹框组件，点击点会emit事件弹框自主实现
 *
 * 使用示例：
  <!-- kebab-case 风格 -->
  <map-marker-list-view 
    :markerList="markerList">
   ></map-marker-list-view>

  <!-- kebab-case 风格 -->
  <MapMarkerListView 
    :markerList="markerList"
  ></MapMarkerListView>
 */

import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap'
const amapManager = new AMapManager()
export default {
  name: 'MapMarkerListView',
  props: {
    // 列表数据
    markerList: {
      type: Array,
      default: () => []
    },
    // 传入了进行单个属性的覆盖，不传则data提供每个属性的默认值
    mapConfig: {
      type: Object,
      default: () => ({})
    },
    // 默认标记点图标
    defaultIcon: {
      type: String,
      default: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png'
    },
  },
  data() {
    const self = this
    return {
      amapManager,
      map: null, // 地图实例
      currentMarker: {}, // 当前点击的marker
      // 默认配置
      defaultMapConfig: {
        zoom: 15,
        zooms: [3, 18],
        center: [108.95, 34.25],
        mapStyle: 'normal', // normal/dark/light/fresh ——— 浅蓝 
        // 地图显示要素控制
        features: [
          'bg',  // 地图底图/背景/陆地
          'road', // 道路
          'point', // 兴趣点/POI
          'building' // 建筑物/3D楼块
        ],
        viewMode: '2D',
        pitch: 0
      },
      mapEvents: {
        init: (map) => {
          lazyAMapApiLoaderInstance.load().then(() => {
            console.log('init', map)
            self.$emit('map-init', map)
            self.map = map
            setTimeout(() => {
              const markers = map.getAllOverlays('marker');
              self.map.setFitView(markers);
            }, 100)
          });
        }
      },
      markerEvents: {
        click: (e) => {
          const extData = e.target.w.extData
          self.currentMarker = extData
          // emit事件，为了父组件弹框
          self.$emit('marker-click', extData)
          // 平缓移动
          self.map.panTo([e.lnglat.lng, e.lnglat.lat]);
        }
      }
    }
  },
  computed: {
    mergedMapConfig() {
      return {
        ...this.defaultMapConfig,
        ...this.mapConfig
      }
    }
  },
  methods: {}
}
</script>

<style scoped>
.map-container {
  height: 100%;
  width: 100%;
  position: relative;
}

.slot-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  border-radius: 5px;
  text-align: center;
  font-size: 14px;
  background-color: rgb(255, 0, 0, 0.2);

  .slot-label {
    background-color: rgb(255, 0, 0, 0.5);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    /* 不换行 */
    white-space: nowrap;
    /* 保持完整单词 */
    word-break: keep-all;
  }
}
</style>