карта листовок отображается серым цветом

Я начинаю leaflet.js с QuickStart, но моя карта показывает, как серый... есть что - то я не хватает?

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 &copy; [...]',
        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>

Дает мне:

Ответ 1

Вам необходимо реализовать следующий раздел Краткого руководства по началу работы: вы инициализировали карту, но не добавили к ней никаких слоев плитки, а значит и серого. Итак, прочитайте в разделе, начинающемся с Next, добавьте слой плитки, чтобы добавить к нашей карте.

Ответ 2

Еще одна вещь, чтобы посмотреть.

Если вы проверите вкладку сети и плитки карт загрузитесь нормально, все же карта по-прежнему остается серой, это может быть связано с загрязнением CSS с вашей окружающей страницы.

В моем случае это было:

img {
    max-height: 100%;
}

Исправлено переопределение:

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

Ответ 3

Вы установили значение для API_KEY в свой код?

Когда я впервые запустил быстрый запуск, я тоже смутился, почему моя карта была серой, но я просто понял, что забыл получить код доступа к API (в моем случае это было для службы Mapbox).

Ссылка на URL-адрес API_KEY, но вы, кажется, не объявляете об этом.

Ответ 4

Для моего ионного приложения это было разрешено установкой trackResize: false в моей конфигурации карты. Это происходило только на Android и setTransform функцией setTransform в исходном коде Leaflet, которая setTransform только Android.

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

Ответ 5

L.tileLayer('http://{s}.title.cloudmade.com/' + API_KEY + '/997/256/можешь быть в курсе, так же как и приписан:' Картографические данные © [...] ', maxZoom: 18}). AddTo (leafletMap);

API_KEY отсутствует

Ответ 6

Заметки elMarquis полезны, если у вас есть проблема при встраивании чего-то другого. В моем случае я использовал Gravity Forms в Wordpress, и у них есть стили изображения, которые имеют широкий охват, а также имеют важное значение.

Я все еще гонюсь за окончательным исправлением, но вам стоит начать, если вы обнаружили ту же проблему:

<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>

Ответ 7

В моем случае я связался с моим файлом CSS слишком поздно; внизу моего тега <body>.

Итак, моя карта контейнера; <div id="map"></div>, вероятно, имел высоту 0px во время загрузки.

Это означает, что карта и ее тайлы пытались загрузить в высоту 0px. Я подозреваю, что это производит маленький "буфер" плитки; все за пределами буферной зоны было серым.

Чтобы исправить это, я сослался на свой файл CSS в <head>; Это хорошая практика и позволяет применять стили до того, как карта попытается загрузить.

UPDATE

Не забудьте связать файл листовки CSS (если вы этого еще не сделали). В противном случае ваши плитки могут казаться "несоответствующими"/пораженными.

<link rel="stylesheet" 
      href="#" onclick="location.href='https://unpkg.com/
/*  */