Vue Leaflet 地图无法正确渲染

Question

我正在尝试通过 vue-leaflet 渲染 OpenStreet 地图。但我面临渲染不完整的问题。地图没有以完整视图显示，而是部分加载而不是按顺序加载。

在此输入图像描述

这是我的代码

<template>
  <l-map
      v-show="loadingMap"
      :zoom="zoom"
      :center="center"
      :options="{ zoomControl: false }"
    >
      <l-tile-layer :url="url"></l-tile-layer>
    </l-map>
</template>

我在一些StackOverflow答案中发现，建议导入leaflet.css，并且我在main.js文件中添加了leaflet.css。（对于沙箱示例，它位于index.html中），但它仍然不起作用

如何完整地查看地图并使用实际的地图视图（不像现在那样部分加载）？

Codesandbox链接：https://codesandbox.io/s/silent-glade-1yqe8? file=/src/App.vue:31-212

Answer 1

你缺少 Leaflet css 样式。将其放入您的main.js或 Vue 组件中。

import 'leaflet/dist/leaflet.css';

然后添加一些样式#app

import 'leaflet/dist/leaflet.css';