传单空白地图答案

【问题标题】：Leaflet Blank Map传单空白地图
【发布时间】：2012-11-29 20:53:03
【问题描述】：

我正在为 Leaflet 做快速入门教程，但我一直得到一张空白地图。我正在使用 JavaScript 来初始化地图，但即使我假设是所有编写代码，我仍然看不到地图。请帮忙，我的代码如下：

<!DOCTYPE HTML>



<div id="map">
    <script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>
    <script type="text/javascript">
    var map = L.map('map').setView([28.23211669921875, -26.050065042385917], 10);
    L.tileLayer('http://b.tilecloudmade.com/e7b61e61295a44a5b319ca0bd3150890/997/256/18/149531/108306.png', {
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery Â© <a href="http://cloudmade.com">CloudMade</a>',
        maxZoom: 18
        }).addTo(map);
    </script>
    </div>
   </div>

【问题讨论】：

标签： javascript map leaflet

【解决方案1】：

您对瓷砖地图的引用似乎有误，下面的代码为您提供了瓷砖。

<!DOCTYPE HTML>


<div id="map"/>
<script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>
<script type="text/javascript">
var map = L.map('map').setView([28.23211669921875, -26.050065042385917], 10);
//L.tileLayer('http://b.tilecloudmade.com/e7b61e61295a44a5b319ca0bd3150890/997/256/18/149531/108306.png', {
L.tileLayer('http://{s}.tile.cloudmade.com/e7b61e61295a44a5b319ca0bd3150890/997/256/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery Â© <a href="http://cloudmade.com">CloudMade</a>',
    maxZoom: 18
}).addTo(map);
</script>

【讨论】：