如何在JSFiddle上制作简单的Leaflet Map？

我对JS有过温和的经验，我一直在使用传单。我的问题是通过JSFiddle创建地图。我已经创建了JSFiddle需要的文件。尽管我看不到我的地图，但我没有收到任何错误。有没有人为什么？如何在JSFiddle上制作简单的Leaflet Map？

我的代码如下，你可以看到它正在工作堆栈的片段;

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

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

html { 
 
\t \t height: 100%; 
 
\t } 
 
\t body { 
 
\t \t margin: 0; 
 
\t \t height: 100%; 
 
\t } 
 
\t #map { 
 
\t \t height: 100%; 
 
\t \t width: 100%; 
 
\t }

<link href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" rel="stylesheet"/> 
 
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script> 
 
<div id="map"></div>

来源

2017-02-01 bukowski

那是哪里不正常的链接小提琴？ – charlietfl

现在已经修复。外部资源是问题。 – bukowski

外部资源应使用特殊的 “外部资源” 选项卡中的jsfiddle被加载，优选地在相同的协议（HTTP/HTTPS），为的jsfiddle（由于混合内容）。当你这样做时，你可以使它工作。下面的jsfiddle工作，我创造了它刚才使用默认的示例代码：

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

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

https://jsfiddle.net/3650w8w3/

来源

2017-02-01 14:07:04

如何在JSFiddle上制作简单的Leaflet Map？

回答

相关问题