<template>
  <div style="position: relative;width: 100%;">
    <div id="mapContainer" class="map"></div>
  </div>
</template>

<script>
export default {
  name: 'TencentMap',
  props: {
    lat: {
      type: Number,
      default: 30.67
    },
    lng: {
      type: Number,
      default: 104.06
    },
    isonloed: {
      type: Boolean,
      default: false
    },
    isx: {
      type: Boolean,
      default: true
    },
    ontype: {
      type: String,
      default: '1'
    },
    message: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      map: null,
      marker: null,
      address: '',
      markers: [],
      infoWindow: null,
    };
  },
  mounted() {
    // 初始化地图
    this.initMap(this.message);
  },
  methods: {
    initMap(e) {
      // 将经纬度转换为腾讯地图的LatLng对象
      const centerLatLng = new qq.maps.LatLng(this.lat, this.lng);

      // 创建地图实例
      this.map = new qq.maps.Map(document.getElementById('mapContainer'), {
        center: centerLatLng,
        zoom: 13
      });

      // 创建信息窗口实例
      this.infoWindow = new qq.maps.InfoWindow({
        map: this.map
      });

      // 遍历 message 数组，为每个位置创建一个标记
      if (e.length > 0) {
        e.forEach(item => {
          let list = this.ontype == '1' ? item.mapPunctuation.split(',') : this.ontype == '2' ? item.mapPunctuation.split(',') : this.ontype == '3' ? item.mapMarker.split(',') : [];
          item.lat = parseFloat(list[0]);
          item.lng = parseFloat(list[1]);
          item.name = this.ontype == '1' ? item.shopName : this.ontype == '2' ? item.advertisingName : this.ontype == '3' ? item.venueName :'无';
          const markerLatLng = new qq.maps.LatLng(item.lat, item.lng);
          const marker = new qq.maps.Marker({
            position: markerLatLng,
            map: this.map
          });

          // 为标记添加点击事件监听器
          qq.maps.event.addListener(marker, 'click', () => {
            this.showInfoWindow(marker, item);
          });

          this.markers.push(marker);
        });
      }
    },
    showInfoWindow(marker, item) {
      // 设置信息窗口的内容
      const content = `
        <div>
          <p><strong>资源名称:</strong> ${item.name}</p>
          <p><strong>位置:</strong> ${item.detailedLocation}</p>
        </div>
      `;

      // 设置信息窗口的位置和内容
      this.infoWindow.setPosition(marker.getPosition());
      this.infoWindow.setContent(content);
      this.infoWindow.open();
    }
  }
}
</script>

<style scoped>
.map {
  width: 100%;
  height: 400px;
}

.address-info {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 999999;
  background: #fff;
}
</style>