2

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

3 回答 3

4

Error: cloudmade is not defined

Where do you want to get your maps from? You have to define a URL as in this example: Leaflet Quick Start Guide.

Insert this line before using the variable cloudmade (after obtaining your own key).

var cloudmade = new L.TileLayer('http://{s}.tile.cloudmade.com/YOUR-API-KEY/997/256/{z}/{x}/{y}.png');
于 2012-03-08T00:30:00.190 回答
3

这可能是以下问题之一：

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

以下解决方案将在 ID 为“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 - Quick Start Guide中的第一个示例，因为它们解释了每一行的作用并提供了使用 CloudMade 切片层的解决方案。

我希望这会有所帮助！

于 2012-02-29T10:31:06.317 回答
0

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

于 2013-09-12T09:08:33.887 回答