傳單地圖加載不正確

我在我的網絡服務中使用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);

來源

2012-02-08 mps_sudip

這可能是下列問題之一：

正在初始化地圖之前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-29 10:31:06 ScottB

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

來源

2012-03-08 00:30:00

如果你不想關心leaflet.js的細節，你可能想看看這個 https://github.com/hamsterbacke23/qleaflet

來源

2013-09-12 09:08:33 MonkeyVoodoo

傳單地圖加載不正確

回答

相關問題