карта листовки не загружается должным образом - PullRequest
Новая
       10

карта листовки не загружается должным образом

2 голосов
/ 08 февраля 2012

Я использую карту leaflet в своем веб-сервисе, но она загружается неправильно. Нижняя часть фактически не загружается.

Как это решить? Я просто использую этот код: 

var latlng = new L.LatLng(50.5, 30.51);

var map = new L.Map('map', {center: latlng, zoom: 15, layers: [cloudmade]});

var markers = new L.FeatureGroup();

var london = new L.LatLng(51.505, -0.09); // geographical point (Longitude and Latitude)  
map.setView(london, 13).addLayer(cloudmade);

Ответы [ 3 ]

4 голосов
/ 08 марта 2012

Ошибка: облако не определено

Откуда вы хотите получить свои карты? Вы должны определить URL, как в этом примере: Краткое руководство по листовке .

Вставьте эту строку перед использованием переменной cloudmade (после получения собственного ключа). 

var cloudmade = new L.TileLayer('http://{s}.tile.cloudmade.com/YOUR-API-KEY/997/256/{z}/{x}/{y}.png');
3 голосов
/ 29 февраля 2012

Это может быть одной из следующих проблем:

  • Инициализация карты до готовности DOM.
  • Облачная переменная для TileLayer установлена ​​неправильно.

Следующее решение инициализирует карту, когда доступен элемент с идентификатором 'map' (Это достигается размещением скрипта внизу страницы. В качестве альтернативы вы можете использовать jQuery).Это также установит переменную cloudmade для использования листов MapQuest OpenStreetMap. 

<!doctype html>
<html>
    <head>
        <title>Leaflet test</title>
        <script type="text/javascript" src="leaflet.js"></script>
        <link href="leaflet.css" rel="stylesheet" type="text/css" />
        <!--[if lte IE 8]>
            <link rel="stylesheet" href="leaflet.ie.css" />
        <![endif]-->
    </head>
    <body>
        <div id="map" style="width:640px;height:480px"></div>
        <script type="text/javascript">
            var cloudmadeUrl = 'http://{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.jpg';
            var subDomains = ['otile1','otile2','otile3','otile4'];
            var cloudmadeAttrib = 'Data, imagery and map information provided by <a href="http://open.mapquest.co.uk" target="_blank">MapQuest</a>, <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> and contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/" target="_blank">CC-BY-SA</a>';
            var cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttrib, subdomains: subDomains});

            var london = new L.LatLng(51.505, -0.09);

            var map = new L.Map('map', {center: london, zoom: 13, layers : [cloudmade]});
        </script>
    </body>
</html>

Я бы также посоветовал вам просмотреть первые примеры в Leaflet - Краткое руководство по началу работы , как они объясняютчто делает каждая линия и предлагает решение для использования слоя листов CloudMade.

Надеюсь, это поможет!

0 голосов
/ 12 сентября 2013

Если вы не хотите заботиться о деталях leaflet.js, вы можете посмотреть на это https://github.com/hamsterbacke23/qleaflet

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...