2012-02-08 77 views
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); 

回答

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图块层的解决方案。

我希望有帮助!

4

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');