如何使简单的传单地图在 JSFiddle 上工作？

Question

我对 JS 的经验一般，而且我已经使用传单一段时间了。我的问题是通过 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);

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

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

Answer 1

应使用 JSFiddle 中的特殊 "External Resources" 选项卡加载外部资源，最好使用与 JSFiddle 相同的协议 (HTTP/HTTPS)（由于混合内容）。当你这样做时，你可以让它工作。下面的 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/

如何使简单的传单地图在 JSFiddle 上工作？

How to make a Simple Leaflet Map work on JSFiddle?

javascript

jsfiddle

leaflet