Question

我正在使用quickstart启动leaflet.js，但我的地图显示为灰色...是否有我遗漏的东西？

的script.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);

的style.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

另一件值得关注的事情。

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

就我而言：

img {
    max-height: 100%;
}

通过覆盖：

来修复

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

Answer 3

页面加载时试试这个；

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

Answer 4

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

当我第一次运行快速入门时，我也很困惑为什么我的地图是灰色的，但是我才意识到我忘了找回API访问代码（在我的情况下，这是为Mapbox提供的服务。）

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

Answer 5

对于我的离子应用，通过在我的地图配置中设置trackResize: false来解决此问题。这只发生在Android上，并由Leaflet源代码中的setTransform函数调用，该函数仅在Android上调用。

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

Answer 6

如果您在嵌入其他内容时遇到问题，则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 7

就我而言，我链接到CSS文件为时已晚；在我的<body>标签的底部。

所以我的地图容器； <div id="map"></div>，在加载时的高度可能为0px。

这意味着地图及其图块尝试加载到0px高度。我怀疑这会产生一个小的图块“缓冲区”；缓冲区之外的所有东西都是灰色的。

要解决此问题，我在<head>中引用了我的CSS文件；两者都是很好的做法，并且允许样式在地图尝试加载之前应用。

更新

请不要忘记链接Leaflet CSS file（如果尚未链接）。否则，您的图块可能会显示为“不匹配” /错开。

<link rel="stylesheet" 
      href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="

crossorigin =“” />

Answer 8

你需要添加一个瓷砖层，这里以Open Street Maps为例

// 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>

传单地图显示灰色

8 个答案: