如何使用传单创建一个jsfiddle

时间:2016-06-16 16:52:22

标签: leaflet jsfiddle

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

因为我没有成功,我搜索了一些例子,发现以下一个工作:

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

但它仍无效...

插入外部资源时,出现以下错误:

  

jsfiddle.net说:

     

你是通过HTTP而不是HTTPS加载资源,你的小提琴不会   工作。你想继续吗?

这里有什么建议吗?

p.s。:下面是jsfiddle windows的代码:

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

1 个答案:

答案 0 :(得分:3)

The Leaflet CDN doesn't support SSL。您可以使用不需要https的内容,例如playground-leaflet,它只是JSBin的一个分支,可以轻松选择小册子库。

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