如何在 JSFiddle 上制作简单的传单地图？答案

【问题标题】：How to make a Simple Leaflet Map work on JSFiddle?如何在 JSFiddle 上制作简单的传单地图？
【发布时间】：2017-02-01 22:07:04
【问题描述】：

我对 JS 有一定的经验，并且我已经使用了一段时间的传单。我的问题是通过 JSFiddle 创建地图。我已经按照 JSFiddle 的要求创建了文件。虽然我看不到我的地图，但我没有收到任何错误。有谁知道为什么？

我的代码如下，你可以看到它正在工作堆栈的 sn-p ；

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>

【问题讨论】：

失效的小提琴的链接在哪里？
现在已修复。外部资源是问题所在。

标签： javascript leaflet jsfiddle

【解决方案1】：

应使用 JSFiddle 中特殊的“外部资源”选项卡加载外部资源，最好与 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/

【讨论】：