Javascript 传单地图显示为灰色_Javascript_Openstreetmap_Leaflet

Javascript 传单地图显示为灰色

javascript leaflet

Javascript 传单地图显示为灰色,javascript,openstreetmap,leaflet,Javascript,Openstreetmap,Leaflet,我开始使用传单，但我的地图显示为灰色。。。有什么我遗漏的吗 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 © [...]',

我开始使用传单，但我的地图显示为灰色。。。有什么我遗漏的吗

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>


我的头衔

给我：

您需要执行《快速入门指南》的下一节：您已经初始化了地图，但没有向地图添加任何平铺层，因此是灰色的。因此，请继续阅读以开头的部分。接下来，我们将添加一个平铺层，以添加到地图中
如果您检查网络选项卡，并且地图分幅加载正常，但地图仍保持灰色，则可能是由于周围页面的CSS污染
我的情况是：

img { max-height: 100%; }
通过覆盖以下内容进行修复：

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

对于我的ionic应用程序，通过在我的地图配置中设置
trackResize:false
解决了这个问题。这只发生在Android上，并由传单源代码中的
setTransform
函数调用，该函数仅在Android上调用

传单地图（“地图”{ trackResize:false })
您是否在代码中为API\u键设置了值
当我第一次运行quickstart时，我也很困惑为什么我的地图是灰色的，但我刚刚意识到我忘记了检索API访问代码（在我的例子中，它是为Mapbox服务的）

您的URL行引用了API_键，但您似乎没有声明它。
如果您在嵌入其他内容时遇到问题，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>

#映射{位置：继承；顶部：0；底部：0；右侧：0；左侧：0；宽度：100%；高度：300px；} .gform_wrapper ul li.gfield.gfield_html.传单容器img{最大宽度：无！重要；}
必须将地图容器的样式设置为非零高度。在我的情况下，我链接到我的CSS文件太晚；在我的
标签的底部
所以我的地图容器<代码>，可能在加载时高度为
0px
这意味着地图及其分幅试图加载到
0px
高度。我怀疑这会产生一个小的“缓冲区”；缓冲区外的一切都是灰色的
为了修复它，我在
中引用了我的CSS文件。在
中引用CSS文件会执行以下两项操作：

良好的做法

允许在尝试加载贴图之前应用样式

更新
别忘了链接（如果你还没有链接的话）。否则，您的磁贴可能会显示“不匹配”/“交错”

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

另一个解决方案是直接在HTML中修改地图容器的
style
属性（即HTML中的CSS内联）。我个人更喜欢我的CSS存在于一个单独的CSS文件中。
在加载页面时试试这个

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

您需要添加一个平铺层，这里是开放式街道地图的示例

//初始化传单 var map=L.map（'map'）.setView（{lon:0，lat:0}，2）； //添加OpenStreetMap分幅 L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{ maxZoom:19，属性：“©；” }).addTo（地图） #地图{高度：280px} 解决方案：这是一个输入错误：http://{s}.title.cloudmake.com/' 应该是-->http://{s}.tile.cloudmake.com/' +1，用于帮助宣传手册教程，它需要将第一个“演示”放在tile层代码之后。它的位置不仅在旁边，而且在上面var-map=L.map（'map'）.setView（[51.505，-0.09]，13）给人一种错觉，认为地图应该在那一点上工作。你可以在答案中添加一个示例代码：L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png？{foo}'，{foo:'bar'，attribute:'map data©；contributors'，}）.addTo（地图）这起作用了，谢谢你的帮助。我真的不明白为什么它不起作用。这对我帮助很大。在大多数情况下，我认为省略任意延迟是可以的，只要在当前线程执行之后将其放在正确的位置即可。