Leaflet Map Vue

Question

我想在Vue中使用Leaflet Map。我安装了来自NPM的传单。

我的代码：

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

<script>
import L from 'leaflet';
export default {
    data() {
        return {};
    },
    mounted() {
        const map = L.map('map', {
            center: [0, 0],
            zoom: 1
        });

        L.tileLayer(
            'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png',
            {}
        ).addTo(map);
    }
};
</script>

<style lang="scss">
@import '/node_modules/leaflet/dist/leaflet.css';

#map {
    width: 100%;
    height: 100%;
}
</style>

问题是，我的UI看起来像这样。

​

有一些丢失的img。如何修复这个bug？

Answer 1

尝试在您的main.js：import "leaflet/dist/leaflet.css"中添加此导入。缺少leeflet css。

从这笔交易中解决：https://github.com/vue-leaflet/Vue2Leaflet/issues/157