Leaflet 如何使用传单创建JSFIDLE

我正在努力使用JSFIDLE创建一个使用传单的运行示例

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

然后我用一把新小提琴复制了这个例子

但它仍然不起作用

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

jsfiddle.net说：

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

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

// 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加载资源，您的小提琴将不会 工作你想继续吗

有什么建议吗？这里怎么了

p、 美国：下面是JSFIDLE窗口的代码：

HTML:

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

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

// 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);

JAVASCRIPT:

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

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

// 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);

//我们将添加一个平铺层以添加到地图中，在本例中，它是一个OSM平铺层。
//创建平铺层通常需要为平铺图像设置URL模板
var osmUrl='http://{s}.tile.osm.org/{z}/{x}/{y}.png'，
osmAttrib='&复制；投稿人,，
osm=L.tileLayer（osmUrl{
maxZoom:18，
署名：奥斯马特里布
});
//使用给定的中心和缩放在“map”div上初始化贴图
var map=L.map（'map'）.setView（[19.04469,72.9258]，12）.添加层（osm）；
//用于在地图上添加标记的脚本单击
函数onMapClick（e）{
var marker=L.marker（即latlng{
真的，
标题：“资源位置”，
alt:“资源位置”，
riseOnHover：正确
}).addTo（地图）
.bindPopup（例如latlng.toString（））.openPopup（）；
//更改标记位置时更新标记
标记器打开（“dragend”，功能（ev）{
var chagedPos=ev.target.getLatLng（）；
this.bindpoppup（chagedPos.toString（））.openPopup（）；
});
}
map.on（'click'，onmaclick）；

还没有。您可以使用不需要https的东西，比如它只是JSBin的一个分支，可以轻松地选择传单库

---

或者，您可以使用，它确实支持https。

注意，您可以通过

http

而不是

https

加载JSFIDLE，就像在您的第一个链接中一样。很好！我没注意到！谢谢事实上，如果没有可用的https存储库，那么这样做是有意义的！