传单地图显示为灰色

Question

我正在使用 quickstart 启动 leaflet.js，但我的地图显示为灰色...我缺少什么吗？

脚本.js：

var leafletMap = L.map('leafletMap').setView([51.505, -0.09], 13);

L.tileLayer('http://{s}.title.cloudmade.com/' + API_KEY + '/997/256/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; [...]',
        maxZoom: 18
}).addTo(leafletMap);

// marker
var marker = L.marker([51.5, -0.09]).addTo(leafletMap);

样式.css：

#leafletMap {
height: 200px;
width: 200px;
}

index.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My title</title>

    <link rel='stylesheet' href='css/bootstrap.css'>
    <link rel='stylesheet' href='css/leaflet.css'>
    <!--[if lte IE 8]>
        <link rel="stylesheet" href="leaflet.ie.css" />
    <![endif]-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <div id='leafletMap'></div>

<script src='js/libs/jquery-1.10.2.js'></script>
<script src='js/libs/bootstrap.js'></script>
<script src='js/libs/leaflet-src.js'></script>
<script src='js/config.js'></script>
<script src='js/script.js'></script>
</body>
</html>

给我：

enter image description here

Answer 1

您需要实现快速入门指南的下一部分：您已初始化地图，但尚未向其添加任何图块图层，因此为灰色。因此，请继续阅读以 接下来我们将添加一个图块图层以添加到地图中。

Answer 2

页面加载时尝试此操作；

setTimeout(function () {
    window.dispatchEvent(new Event('resize'));
}, 1000);

Answer 3

还有一件事值得关注。

如果您检查网络选项卡并且地图图块加载正常，但地图仍然保持灰色，则可能是由于周围页面的 CSS 污染造成的。

就我而言，是：

img {
    max-height: 100%;
}

通过覆盖修复：

.my-leaflet-map-container img {
    max-height: none;
}

Answer 4

您必须将地图容器设置为非零高度。 就我而言，我链接到 CSS 文件太晚了；在我的

<body>

标签的底部。

所以我的地图容器；

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

，加载时的高度可能为

0px

。

这意味着地图及其图块尝试加载到

0px

高度。我怀疑这会产生一个小瓷砖“缓冲区”；缓冲区之外的所有内容都是灰色的。

为了解决这个问题，我在

<head>

中引用了我的 CSS 文件。引用

<head>

中的 CSS 文件可以实现以下两点：

一个好的做法
允许在地图尝试加载之前应用样式

更新

不要忘记链接 Leaflet CSS 文件（如果尚未链接）。否则您的瓷砖可能会出现“不匹配”/交错。

<link rel="stylesheet" 
      href="https://unpkg.com/[email protected]/dist/leaflet.css"
      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
      crossorigin=""/>

另一个解决方案是直接在 HTML 中修改地图容器的

style

属性（即 HTML 中的 CSS 内联）。我个人更喜欢我的 CSS 存在于单独的 CSS 文件中。

Answer 5

您需要添加一个图块图层，这里以开放街道地图为例

// initialize Leaflet
var map = L.map('map').setView({lon: 0, lat: 0}, 2);

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

#map {height: 280px}

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" />

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

Answer 6

对于我的离子应用程序，这是通过在地图配置中设置

trackResize: false

解决的。这仅发生在 Android 上，并由仅在 Android 上调用的 Leaflet 源代码中的

setTransform

函数调用。

Leaflet.map('map', {
     trackResize: false
})

Answer 7

您是否在代码中设置了 API_KEY 的值？

当我第一次运行快速入门时，我也很困惑为什么我的地图是灰色的，但我刚刚意识到我忘记检索 API 访问代码（在我的例子中，它是用于 Mapbox 的服务。）

您的 URL 行引用了 API_KEY，但您似乎没有声明它。

Answer 8

如果您在嵌入其他内容时遇到问题，elMarquis 的注释很有用。就我而言，我在 WordPress 上使用重力形式，它们的图像样式范围很广，而且也设置得很重要。

我仍在寻求最终的解决方案，但是如果您发现了同样的问题，这应该可以帮助您开始：

<style>
    #map { position: inherit; top:0; bottom:0; right:0; left:0; width:100%; height:300px;}
    .gform_wrapper ul li.gfield.gfield_html .leaflet-container img { max-width: none!important;}
  </style>

Answer 9

在与 vuejs 相同的情况下，您需要将初始化映射函数放在 setTimout 中：

 mounted() {
    setTimeout(()=>{
      this.map = L.map(this.$refs.map).setView([-12.256545945045046, -55.52556684608532], 4)
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors'
      }).addTo(this.map)
    }, 500)
  },

传单地图显示为灰色

问题描述投票：0回答：9

9个回答

最新问题

传单地图显示为灰色

问题描述 投票：0回答：9

9个回答

最新问题

问题描述投票：0回答：9