小冊子 - 私は基本的な例が正常に動作しないようです。

私はリーフレット（ウェブマップAPI）を何時間も働かせようとしています。最初はあまりにも多くのことをやろうと間違っていましたが、今は基本的な例を取り上げようとしています。ここで小冊子 - 私は基本的な例が正常に動作しないようです。

は、私は（HTMLとJavascriptを）持っているコードです：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <script src="./leaflet.js"></script> 
     <link rel="stylesheet" type="text/css" href="./leaflet.css" /> 
     <script type="text/javascript"> 
      function initmap(){ 
       var map1 = L.map('map'); 
       //map1.setView([38.642433, -90.255372]),9); //Thanks! 
       map1.setView([38.642433, -90.255372],9); 

       // add an OpenStreetMap tile layer 
       L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
         attribution: '&amp;copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
       }).addTo(map1); 
      } 
     </script> 
     <style> 
      #map { 
       position: absolute; 
       top: 0; 
       right: 0; 
       left: 0; 
       bottom: 0; 
       top: 0; 
       z-index: 0; 
      } 
    </style> 
     <!-- Without this styling to set the map dimension, the tiles will get downloaded, but nothing will display on the map div! Thank you choz for answering this question! --> 
    </head> 

    <body onload="initmap()"> 
     <div id='map'></div> 
    </body> 
</html>

概要：私が最初に取得にあった「行方不明;文の前」と「リファレンスエラー：定義されていませんinitmap」。これは、chozの最初のコメントごとにマップ定義の余分な括弧を削除することで修正されました。その後、タイルがダウンロードされていても地図が表示されないという問題がありました。 Chozは、地図の必要なスタイルについて再びコメントしました。上記の作業コードが含まれています。

出典

2016-06-27 JakeJ

'map1.setView（[38.642433、-90.255372]）、9）;'; 'map1.setView（[38.642433、-90.255372]、9）へ。 – choz

うわー。私はそれを見ていないとは信じられない。金曜日の夜明けまでコードに行きました、たぶん私は眠りが足りません。 – JakeJ

エラーは表示されませんが、これは本当に奇妙です。開発ツールでF12キーを押してネットワークタブに移動すると、適切なタイルイメージがすべてダウンロードされていることがわかります。 – JakeJ

#mapの寸法を設定していない可能性があります。ここでは、どのように動作させるかについての非常に基本的なサンプルがあります。

// create a map in the "map" div, set the view to a given place and zoom 
 
var map = L.map("map").setView([39.50, -98.35], 5); 
 

 
// add an OpenStreetMap tile layer 
 
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

#map { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    top: 0; 
 
    z-index: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" /> 
 
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script> 
 
<div id='map'></div>

出典

2016-06-27 01:23:03 choz

私は二度chozを助けてくれてありがとう、そしてあなたの最終的な答えは実際に私が数日間持っていた問題を解決しました。 – JakeJ

私は最後のコードレイアウトで質問を更新しています。 – JakeJ

小冊子 - 私は基本的な例が正常に動作しないようです。

答えて

関連する問題