web-dev-qa-db-ja.com

リーフレットマップが灰色で表示される

quickstart を使用してleaflet.jsを開始していますが、マップが灰色で表示されています...何か不足していますか？

script.js：

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

L.tileLayer('http://{s}.title.cloudmade.com/' + API_KEY + '/997/256/{z}/{x}/{y}.png', {
        attribution: 'Map data © [...]',
        maxZoom: 18
}).addTo(leafletMap);

// marker
var marker = L.marker([51.5, -0.09]).addTo(leafletMap);

style.css：

#leafletMap {
height: 200px;
width: 200px;
}

index.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My title</title>

    <link rel='stylesheet' href='css/bootstrap.css'>
    <link rel='stylesheet' href='css/leaflet.css'>
    <!--[if lte IE 8]>
        <link rel="stylesheet" href="leaflet.ie.css" />
    <![endif]-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <div id='leafletMap'></div>

<script src='js/libs/jquery-1.10.2.js'></script>
<script src='js/libs/bootstrap.js'></script>
<script src='js/libs/leaflet-src.js'></script>
<script src='js/config.js'></script>
<script src='js/script.js'></script>
</body>
</html>

くれます：

enter image description here

javascriptopenstreetmapleaflet
22
Connor Leech

クイックスタートガイドの次のセクションを実装する必要があります。マップを初期化しましたが、タイルレイヤーを追加していないため、灰色になっています。 次に、タイルレイヤーを追加してマップに追加しますで始まるセクションを読んでください。

38
tmcw

注目すべきもう1つのこと。

ネットワークタブをチェックし、マップタイルが正常に読み込まれているにもかかわらず、マップがまだ灰色のままである場合は、周囲のページからのCSS汚染が原因である可能性があります。

私の場合、それは：

img {
    max-height: 100%;
}

以下でオーバーライドすることにより修正されました：

.my-leaflet-map-container img {
    max-height: none;
}
4
elMarquis

コードでAPI_KEYの値を設定しましたか？

クイックスタートを最初に実行したときに、マップが灰色である理由も混乱していましたが、APIアクセスコードを取得するのを忘れていたことがわかりました（私の場合は、Mapboxのサービス用でした）。

URL行がAPI_KEYを参照していますが、宣言しているようではありません。

1
kdpnz

ElMarquisのメモは、他の何かに埋め込むときに問題が発生した場合に役立ちます。私の場合、WordpressでGravity Formsを使用していましたが、それらには広い範囲の画像スタイルがあり、重要に設定されています。

私はまだ最終的な修正を追跡していますが、同じ問題を発見した場合は、これで開始できます。

<style>
    #map { position: inherit; top:0; bottom:0; right:0; left:0; width:100%; height:300px;}
    .gform_wrapper ul li.gfield.gfield_html .leaflet-container img { max-width: none!important;}
  </style>
0
anakaine

私の場合、CSSファイルにリンクするのが遅すぎました。 <body>タグの下部。

だから私の地図コンテナ; <div id="map"></div>、ロード時に0pxの高さがあった可能性があります。

これは、マップとそのタイルが0pxの高さに読み込もうとしたことを意味します。これは小さなタイルの「バッファ」を生成すると思います。バッファゾーンの外側はすべて灰色でした。

これを修正するために、CSSファイルを<head>;で参照しました。どちらも良い方法であり、マップがロードされる前にスタイルを適用できるようにしました。

[〜＃〜]更新[〜＃〜]

リーフレットCSSファイル をリンクすることを忘れないでください（まだリンクしていない場合）。そうしないと、タイルが「不一致」/ずれて表示される場合があります。

<link rel="stylesheet" 
      href="https://unpkg.com/[email protected]/dist/leaflet.css"
      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="

crossorigin = "" />

0
The Red Pea

私のionicアプリの場合、これはマップ構成で_trackResize: false_を設定することで解決されました。これはAndroidでのみ発生し、setTransform関数。

Leaflet.map('map', { trackResize: false })

0
Michael Auger