Question

我的地图无法正确加载。这就像一个尚未完成的难题。应该在其中放置瓷砖的地方有白色缝隙，但缺少空白。

问题是，仅请求了6张图像（GET-Request），但是应该更多。

我正在将leafletjs作为npm包导入

import leaflet from 'leaflet'

这是我的代码

    const map = leaflet
      .map('map')
      .setView([51.509865, -0.118092], 13)

    leaflet.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map)

这是我的HTML结构

  <div
    id="map"
    class="col-9 pl-0 pr-0">
  </div>

我还为div容器提供了height的{{1}}和400px的{{1}}

Image of the rendered map

Answer 1

您还需要加载leaflet.css文件。因此，如果您有main.scss，只需导入下一行

@import "node_modules/leaflet/dist/leaflet.css";

或在您的index.html中添加一个script标记

<style src='node_modules/leaflet/dist/leaflet.css'></style>

Answer 2

好简单：我也必须导入传单样式，以使其正常工作。

在组件内部，我通过样式标签嵌入了这些样式

<style src='leaflet/dist/leaflet.css'></style>

Leafletjs + Vue.js：请求的图块太少

2 个答案: