リーフレットマップが読み込まれていません

リーフレットの新機能ですから、基本を理解しようとしています。リーフレットが提供するチュートリアルのオンラインに従うとき、私は地図をロードするのに苦労しています。提供された座標を使用しても問題はありませんが、座標を変更すると何も読み込まれません。リーフレットマップが読み込まれていません

誰でも手助けできますか？ここで私が持っているものません：

<!DOCTYPE html> 
    <html> 
    <head> 
    <title>Leaflet Web Map</title> 
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> 
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> 
<style> 
    #map { 
    width: 960px; 
    height:500px; 
    } 
</style> 
</head> 


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

<script> 
    var map = L.map('map',{ 
    center: [43.64701, -79.39425], 
    zoom: 15 
    }); 
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
    }).addTo(map); 
</script>

このロードには気が、私はすべての座標を変更した場合、それはロードされません。

出典

2017-02-08 Rebecca McGowan

地図の中心を変更するには、地図のプロパティ：center: [43.00, -79.00]で変更する必要があります。二つ目は、経度の範囲（-180、180）に設定されるべきである

var map = L.map('map',{ 
    center: [43.00, -79.00], 
    zoom: 15 
});

あなたは、第1の座標ということを覚えておいてください、緯度は、範囲（-90、90）の数値をとります。しかし、とにかく、その2番目の座標アプリケーションを超過すれば、与えられた範囲内にあるかのようにその値を計算します。

多分何かを混ぜて、ここでそれを変更しようとしましたL.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',..？この行は、マップの中心にないベースマップタイルの読み込みを表します。

出典

2017-02-09 22:11:32 d324223

問題を再現できませんでした。センターを変更すると、まだマップが読み込まれます。私はあなたが最後ボディ、エンドhtmlタグを持っていなかったことに気づいたので、私はそれらを追加

var map = L.map('map', { 
 
    //center: [43.64701, -79.39425], //comment out one of the centers 
 
    center: [40, -80], 
 
    zoom: 15 
 
    }); 
 
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
 
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
 
    }).addTo(map);

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Leaflet Web Map</title> 
 
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> 
 
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> 
 
    <style> 
 
    #map { 
 
     width: 960px; 
 
     height: 500px; 
 
    } 
 
    </style> 
 
</head> 
 

 

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

 
</html>

（以下、[ファイル名を指定して実行コードスニペット]ボタンをクリックしてください）。

あなたはどの座標を変更しようとしていましたか？

出典

2017-02-08 14:42:44 user2441511

var tileLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', 
    { 
     attribution: false 
    }); 

var map = L.map('map', 
    { 
     zoomControl: true, 
     layers: [tileLayer], 
     maxZoom: 18, 
     minZoom: 6 
    }) 
    .setView([43.64701, -79.39425], 15); 

    setTimeout(function() { map.invalidateSize() }, 800);

に試してみてください

出典

2017-04-20 12:24:50

リーフレットマップが読み込まれていません

答えて

関連する問題