Question

我在我的网络服务中使用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);

Answer 1

错误：未定义cloudmade

您想从哪里获取地图？您必须在此示例中定义网址：Leaflet Quick Start Guide。

在使用变量cloudmade之前插入此行（获取自己的密钥后）。

var cloudmade = new L.TileLayer('http://{s}.tile.cloudmade.com/YOUR-API-KEY/997/256/{z}/{x}/{y}.png');

Answer 2

这可能是以下问题之一：

在DOM准备好之前初始化地图。
未正确设置TileLayer的cloudmade变量。

当具有ID“map”的元素可用时，以下解决方案将初始化地图（这是通过将脚本放在页面底部来实现的。或者您可以使用jQuery）。这也将使cloudmade变量设置为使用MapQuest OpenStreetMap tile。

<!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 - Quick Start Guide的第一个示例，因为它们解释了每条线路的用途并提供了使用CloudMade磁贴层的解决方案。

我希望有所帮助！

Answer 3

如果你不想关心leaflet.js的细节，你可能想看看这个 https://github.com/hamsterbacke23/qleaflet

传单地图未正确加载

3 个答案: