传单地图分为几个部分[重复]

Question

我在我的 vue web 应用程序中使用传单，我的控制台中没有任何错误，但地图看起来很奇怪。这是我显示地图的代码

export default defineComponent({
  name: 'CommonMap',
  props: {
    locations: {
      type: Array as PropType<Location[]>,
      required: true
    }
  },
  setup(props) {
    const initialLatitude = -5.1595465;
    const initialLongitude = 119.441659;
    const initialZoom = 13;
    const maxZoom = 18;
    const minZoom = 13;

    const southWest = leaflet.latLng(-5.2, 119.3);
    const northEast = leaflet.latLng(-5.1, 119.5);
    const bounds = leaflet.latLngBounds(southWest, northEast);

    let map: leaflet.Map;

    onMounted(() => {
      map = leaflet.map('map', {
        maxBounds: bounds,
        maxBoundsViscosity: 1.0,
        minZoom: minZoom,
        maxZoom: maxZoom,
        attributionControl: false // Add this line to remove attribution control
      })
      .setView([initialLatitude, initialLongitude], initialZoom);

      leaflet.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
      }).addTo(map);

    });

    const zoomToLocation = (location: Location) => {
      map.flyTo([location.coordinates[1], location.coordinates[0]], 16, {
        animate: true,
        duration: 1.5
      });
    };

    return {
      zoomToLocation
    };
  },
});

我错过了什么吗？

这就是我称呼我的传单的方式

import * as leaflet from 'leaflet';

我使用传单

"leaflet": "^1.9.4",

我希望它是一个普通的地图，显示完整的地图

Answer 1

检查您是否使用传单的CSS

以风格查看.leaflet-container

对于前任：

.map-location{
    width: 50rem;
    border-radius: 1rem;
}

.leaflet-container{
    width: 100%;
    height: 80%;
}

作为参考，您可以查看此代码 *记住这是反应代码（方法类似）