<template>
  <div id="map" class="map-container"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue';

const map = ref(null);

onMounted(() => {
  // 确保maptalks库已正确安装
  try {
    import('maptalks').then(maptalks => {
      // 确保DOM元素存在
      const mapContainer = document.getElementById('map');
      if (!mapContainer) {
        console.error('找不到地图容器元素');
        return;
      }

      // 初始化地图
      map.value = new maptalks.Map("map", {
        center: [103.75, 1.40],
        zoom: 8,
        baseLayer: new maptalks.TileLayer('base', {
          urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
          subdomains: ['a', 'b', 'c', 'd'],
          attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
        })
      });

      // 添加矢量图层
      const layer = new maptalks.VectorLayer("vector");
      map.value.addLayer(layer);

      // 添加标记点
      const marker = new maptalks.Marker([103.75, 1.40], {
        symbol: {
          markerType: 'pin',
          markerFill: '#3B82F6',
          markerLineColor: '#fff',
          markerLineWidth: 2,
          markerWidth: 30,
          markerHeight: 40
        }
      });
      layer.addGeometry(marker);
    }).catch(error => {
      console.error('加载maptalks库失败:', error);
    });
  } catch (error) {
    console.error('地图初始化错误:', error);
  }
});
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style> 