传单地图加载不正确

问题描述：

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

答

这可能是下列问题之一：

正在初始化地图之前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图块层的解决方案。

我希望有帮助！

答

Error: cloudmade is not defined

你想从哪里得到你的地图？您必须定义一个URL，如下例所示：Leaflet Quick Start Guide。

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

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

答

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

传单地图加载不正确

相关推荐