<!-- src/components/MapView.vue -->
<template>
  <div id="map" style="width: 100%; height: 520px"></div>
</template>
<script setup lang="ts">
import L from 'leaflet'
import Location from '../images/location.png'

const initMap = () => {
  // 地图初始化
  const map = L.map('map').setView([51.505, -0.09], 3)

  // 添加 TileLayer
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution:
      '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map)

  const popupOptions = {
    closeButton: false, // 移除关闭按钮
    autoClose: false, // 禁止点击其他地方自动关闭
    closeOnClick: false // 禁止点击地图时自动关闭
  }

  const customIcon = L.icon({
    iconUrl: Location,
    iconSize: [20, 20], // 图标尺寸
    iconAnchor: [10, 20], // 图标锚点
    popupAnchor: [0, -8] // 弹出层位置
  })

  const marker = L.marker([51.5, -0.09], { icon: customIcon }).addTo(map)

  const customPopupContent = `
    <div class="popup-content">
      <p class="label">origin</p>
      <p>
        <span class="font_family icon-icon_location_fill_b" style="color: #ED6D00"></span>
        ShenZhen,SG
      </p>
    </div>
  `

  // 绑定弹出框并立即展示
  marker.bindPopup(customPopupContent, popupOptions).openPopup()
}

onMounted(() => {
  initMap()
})
</script>

<style lang="scss">
@import 'leaflet/dist/leaflet.css';
.leaflet-popup-content-wrapper {
  border-radius: 6px;
}
.leaflet-popup-content {
  padding: 4px;
  margin: 0;
  .popup-content {
    p {
      margin: 0;
      span {
        margin-left: -2px;
        font-size: 12px;
        font-weight: 700;
      }
    }
    .label {
      margin-bottom: 4px;
      font-size: 12px;
      color: var(--color-neutral-2);
    }
  }
}

/* 自定义弹出窗口箭头 */
.leaflet-popup-tip {
  display: none;
}
.popup-content {
}
</style>
