如何使用Leaflet创建一个JSFiddle

Question

我正在尝试在jsfiddle上创建一个使用leaflet的运行示例，但遇到了困难。

因为没有成功，我搜索了一些示例，找到了以下可用的示例：

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

然后我将示例复制到了一个新的fiddle中：

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

但它仍然无法工作...

在插入外部资源时，出现了以下错误：

jsfiddle.net 说：

您正在通过HTTP加载资源而不是HTTPS，您的fiddle将无法工作。您要继续吗？

这里有什么建议吗？

p.s.：下面是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);

- udo

---

请注意，您可以通过 http 而不是 https 加载 JSFiddle，就像您的第一个链接一样。 - ghybs

好的发现！没有注意到那个问题！谢谢！确实，如果没有可用的 HTTPS 存储库，这样做是有意义的！ - udo

Answer 1

Leaflet CDN目前还不支持SSL。您可以使用一些不需要https的东西，例如playground-leaflet，它只是一个带有可轻松选择的leaflet库的JSBin分支。

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

- Jieter