问不能在Vue组件中加载传单

EN

<template>
  <div id="mapContainer"></div>
</template>

<script>
import "leaflet/dist/leaflet.css";
import L from "leaflet";

export default {
  name: "LeafletMap",
  data() {
    return {
      map: null
    };
  },
  mounted() {
    this.map = L.map("mapContainer").setView([51.959, -8.623], 12);
    L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
      attribution:
        '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(this.map);
  },
  beforeDestroy() {
    if (this.map) {
      this.map.remove();
    }
  }
};
</script>

<style scoped>
#mapContainer {
  width: 100vw;
  height: 100vh;
}
</style>

<template>
  <div id="mapContainer"></div>
</template>

<script>
import { map, tileLayer } from "leaflet";
import { onMounted, onBeforeUnmount } from "vue";

export default {
  name: "Map",
  setup() {
    let container = null;

    onMounted(() => {
      container = map("mapContainer").setView([51.959, -8.623], 12);

      tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
        attribution:
          '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(container);
    });

    onBeforeUnmount(() => {
      container.remove();
    });
  }
};
</script>

<style scoped>
#mapContainer {
  width: 40vw;
  height: 40vh;
}
</style>

<template>
      <div id="app" v-if="isLoad">
        <l-map style="height: 350px" :zoom="zoom"   :center="center" @click="addMarker"   :max-zoom="maxZoom" :min-zoom="minZoom">
          <l-tile-layer :url="url" :attribution="attribution"></l-tilelayer>
          <l-marker  :lat-lng="markerLatLng" ></l-marker>
        </l-map>
      </div>
</template>

<script>
    import {LMap, LTileLayer, LMarker} from "vue2-leaflet";
    import "leaflet/dist/leaflet.css";
    import {Icon} from "leaflet";
    
    delete Icon.Default.prototype._getIconUrl;
    
    Icon.Default.mergeOptions({
      iconRetinaUrl: require("leaflet/dist/images/marker-icon-2x.png"),
      iconUrl: require("leaflet/dist/images/marker-icon.png"),
      shadowUrl: require("leaflet/dist/images/marker-shadow.png")
    });
    export default {
      components: {
        LMap,
        LTileLayer,
        LMarker,
      },
    
      mounted() {
        this.mapIsReady()
      },
      data() {
        return {
          isLoad: false,
          url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
          attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
           zoom: 15,
          maxZoom:18,
          minZoom:5,
          center: [35.6892, 51.3890],
          markerLatLng: [35.6892, 51.3890],
        };
      },
      methods: {
        mapIsReady() {
          let self = this
          setTimeout(() => self.isLoad = true, 1500)
        },
        addMarker(event) {
          console.log(event)
          this.markerLatLng = [event.latlng.lat,event.latlng.lng];
        },
    
      },
    };
</script>