リーフレットを使用する実行例を作成しようとしてjsfiddleと苦労しています。リーフレットを使用してjsfiddleを作成する方法
私は成功しませんでしたので、私はいくつかの例を検索し、次の1つの作業が見つかりました:私は、新しいフィドルに
それはまだ動作していない
外部リソースを挿入する際...、次のエラーがあった:
jsfiddle.net says:
You're loading resources over HTTP not HTTPS, your fiddle will not work. Do you wish to continue?
任意の提案ここで間違っている何が?
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 = '© <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);
最初のリンクと同様に、JSFiddleを 'https'ではなく' http'で読み込むことができます。 – ghybs
良いキャッチ!それに気付かなかった!ありがとう!実際にはhttpsリポジトリが利用できない場合に備えてこれを行うのが理にかなっています! – udo