<template>
    <div>
      <h2 class="text-lg font-bold mb-2">Leaflet 地图示例</h2>
      <!-- <div id="map" class="w-full h-96"></div> -->
      <div id="map" style="width: 100%; height: 200px;"></div>

    </div>
  </template>
  
  <script>
  import L from 'leaflet'
  import 'leaflet/dist/leaflet.css'
  
  export default {
    name: 'LeafletMap',
    data() {
      return {
        map: null,
        marker: null,

      }
    },
    mounted() {
      this.initMap()
    },
    methods: {
      initMap() {
        // 固定位置坐标（例如成都锦里）
        const location = [1.305611, 103.860150]
  
        // 初始化地图
        this.map = L.map('map').setView(location, 15) // 15 是缩放级别
  
        // 添加 OpenStreetMap 图层
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          attribution: ''
        }).addTo(this.map)

        // this.marker = L.marker(location).addTo(this.map).bindPopup('成都锦里')

        // 添加 Marker
        this.marker = L.marker(location)
          .addTo(this.map)
          .bindPopup('成都锦里')
          .openPopup()
      }
    }
  }
  </script>
  
  <style scoped>
  #map {
    width: 100%;
    height: 100%;
  }
  </style>
  