传单地图上的地理显示没有出现在nuxtjs版本2中

已安装程序包: leaflet: ^1.9.4 nuxt: ^2.0.0 node: 14.21.3` npm: 6.14.18
问题是:传单地图上的地理显示没有出现,我使用了GeoJSON。

我已经正确地写下了传单的首字母缩写以及标题中的CSS样式链接。地图应该能正常运行,但事实并非如此。

这是我的代码:

<template>
  <div class="relative w-100">
    <div id="map"></div>
  </div>
</template>

<script>
export default {
  name: 'CTFMapV2',
  head() {
    return {
      link: [
        {
          rel: 'stylesheet',
          href: 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css',
        },
      ],
    }
  },
  data() {
    return {
      L: null,
      map: null,
      zoom: 5,
      center: [-3, 117],
      geoJsonData: null,
      geoOptions: {
        interactive: false,
        style: {
          weight: 2,
          opacity: 1,
          color: '#27354a',
          dashArray: '3',
          fillOpacity: 0.7
        }
      },
      LMapOptions: {
        dragging: false,
        boxZoom: false,
        zoomControl: false,
        scrollWheelZoom: false,
        doubleClickZoom: false
      },
      popupOptions: {
        closeButton: false,
        className: 'map-popup',
        interactive: true,
        maxWidth: 330,
        autoPan: false,
        keepInView: true,
        offset: [0, 0],
        autoPanPaddingTopLeft: [0, 0],
        autoPanPaddingBottomRight: [0, 0]
      },
      iconSize: 22
    }
  },
  computed: {
    dynamicSize() {
      return [this.iconSize, this.iconSize]
    },
    dynamicAnchor() {
      return [this.iconSize / 2, this.iconSize / 1.5]
    }
  },
  mounted() {
    this.initialMap()
  },
  methods: {
    async initialMap() {
      this.L = require('leaflet')
      this.map = this.L.map('map', {
        center: this.center,
        ...this.LMapOptions
      })
      this.L.geoJSON(await this.loadGeoJsonData(), this.geoOptions).addTo(
        this.map
      )
    },
    badgeVariant(level) {
      const lv = level.toLowerCase()
      if (lv === 'easy') return 'success'
      else if (lv === 'medium') return 'warning'
      else if (lv === 'hard') return 'danger'
      return 'secondary'
    },
    async loadGeoJsonData() {
      try {
        const response = await fetch(
          'https://raw.githubusercontent.com/eppofahmi/geojson-indonesia/master/provinsi/all_maps_state_indo.geojson'
        )
        const idn = await response.json()
        return idn
      } catch (error) {
        console.error('Error loading GeoJSON:', error)
      }
    },
    createIcon({ img }) {
      return this.L.icon({
        iconUrl: img,
        iconSize: this.dynamicSize,
        iconAnchor: this.dynamicAnchor,
        popupAnchor: [0, 0]
      })
    },
    createMarker({ icon, coordinate, map, content }) {
      const marker = this.L.marker(coordinate, { icon }).addTo(map)

      const popup = this.L.popup().setContent(content)

      marker.on('mouseover', function() {
        marker.openPopup()
      })
      popup.on('mouseout', function() {
        popup.closePopup()
      })

      marker.bindPopup(popup)
      return marker
    }
  }
}
</script>

<style scope>
#map {
  background-color: #161d2a;
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
</style>

在这里,我在挂载的nuxt上做了一个初始的传单映射,然后我将其设置为检索GeoJSON数据(我已经确保GeoJSON数据存在并且有效)。