2017-11-03 22 views
0

私はリーフレットには新しく、チュートリアルの後にそれを設定していましたが、マップをロードするのに問題はありませんでした。 問題は、HTMLタグ内にスクリプトを貼り付ける代わりに、外部JSファイル経由でスクリプトを実行しようとすると開始されます。だから、今、私はこのように動作するようにそれを得ることができません: HTML:外部JSファイルにリーフレットを読み込むことはできますか?

<head> 
    <link rel="stylesheet" type="text/css" href="leaflet/leaflet.css"/> 
    <script type="text/javascript" src="leaflet/leaflet.js"></script> 
    <link rel="stylesheet" type="text/css" href="src/style.css"/> 
    <script type="text/javascript" src="src/javascript.js"></script> 
</head> 
<body> 
    <div id="mapid"></div> 
</body> 

Javascriptを:

var mymap = L.map('mapid').setView([51.505, -0.09], 13); 

document.getElementById("mapid").onload = function loadMap(){ 
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiZGlvZ204MDAiLCJhIjoiY2o5aGRxY3B5MGdyZTMzczJvNm95NHAxeSJ9.6M_vVT8BcyJay_acp-eEXA', { 
     attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>', 
     maxZoom: 18, 
     id: 'mapbox.streets', 
     accessToken: 'your.mapbox.access.token' 
    }).addTo(mymap); 
}; 

は、JSファイルに私はdiv要素の()のonLoadせずにそれをロードしようと試みましたあなたはその例で見ることができますが、それらのどれも働いていませんでした。 このようなチラシマップを読み込むことは可能ですか?

+0

は、固定間違った場所に自分のJSファイルをリンクさ>< – Diogm800

答えて

1

onloadイベントがdiv要素上に存在していないお時間をいただき、ありがとうございます。

GlobalEventHandlers mixinのonloadプロパティは、リソースのロード時に起動するWindow、XMLHttpRequest、要素などのloadイベントのイベントハンドラです。あなたのケースではhttps://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload

document.bodyonloadをキャッチi'de:

document.body.onload = function() { 
    // Do stuff... 
}; 
+0

を、それはdoesnのいくつかの理由。このような仕事はありません。地図のロードを行うには、すべての要素の後に体内に書き込む必要があります。 Diogm800

関連する問題