Question

我有适度的JS经验，我一直在使用传单。我的问题是由JSFiddle创建一个地图。我已经按照JSFiddle的要求创建了该文件。虽然我看不到我的地图，但我没有收到任何错误。有谁为什么？

我的代码如下，你可以看到它正在运行stack的代码段;

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

应使用特殊的＆＃34;外部资源＆＃34;加载外部资源。 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/

如何在JSFiddle上创建一个简单的Leaflet Map？

1 个答案: