如何使用传单创建 jsfiddle答案

【问题标题】：how to create a jsfiddle using leaflet如何使用传单创建 jsfiddle
【发布时间】：2016-10-18 07:41:04
【问题描述】：

我正在努力使用 jsfiddle 尝试创建一个使用传单的运行示例。

因为我没有成功，所以我搜索了一些示例，发现以下一个有效：

http://jsfiddle.net/kedar2a/LnzN2/2/

然后我将示例复制到一个新的小提琴中

https://jsfiddle.net/aLn3ut5z/1/

但是还是不行……

插入外部资源时出现如下错误：

jsfiddle.net 说：

您正在通过 HTTP 而不是 HTTPS 加载资源，您的小提琴不会工作。你想继续吗？

有什么建议吗？

ps：下面是jsfiddle窗口的代码：

HTML：

<div id="map"></div>

CSS：

#map {
    height: 500px;
    width: 80%;
}

JAVASCRIPT：

// We’ll add a tile layer to add to our map, in this case it’s a OSM tile layer.
// Creating a tile layer usually involves setting the URL template for the tile images
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
      osm = L.tileLayer(osmUrl, {
        maxZoom: 18,
        attribution: osmAttrib
      });
// initialize the map on the "map" div with a given center and zoom
var map = L.map('map').setView([19.04469, 72.9258], 12).addLayer(osm);

// Script for adding marker on map click
function onMapClick(e) {
var marker = L.marker(e.latlng, {
    draggable: true,
    title: "Resource location",
    alt: "Resource Location",
    riseOnHover: true
    }).addTo(map)
    .bindPopup(e.latlng.toString()).openPopup();

    // Update marker on changing it's position
    marker.on("dragend", function(ev) {

    var chagedPos = ev.target.getLatLng();
    this.bindPopup(chagedPos.toString()).openPopup();

    });
    }
    map.on('click', onMapClick);

【问题讨论】：

请注意，您可以通过 http 而不是 https 加载 JSFiddle，就像在您的第一个链接中一样。
好收获！没注意到！谢谢！如果没有可用的 https 存储库，这样做确实很有意义！

标签： leaflet jsfiddle

【解决方案1】：

The Leaflet CDN doesn't support SSL 还没有。您可以使用不需要 https 的东西，例如 playground-leaflet，它只是 JSBin 的一个分支，带有易于选择的传单库。

或者，您可以使用支持 https 的 Leaflet from cdnjs.net。

【讨论】：