在 ajax 加载页面中加载传单地图不会呈现瓷砖？答案

【问题标题】：loading leaflet map in ajax loaded page renders no tiles?在 ajax 加载页面中加载传单地图不会呈现瓷砖？
【发布时间】：2013-09-24 12:37:07
【问题描述】：

您好，我正在做一个 phonegap 应用程序，它使用 ajax 加载我的子页面，其中一个我正在尝试加载传单地图。它不是在渲染瓷砖吗？我不知道我错过了什么？

我在我的索引文件和应该显示地图的子页面中加载传单 css 和 js 文件，我有以下代码：

    <div id="themappage">
       <div id="header" class="toolbar">
        <h1>The Map</h1>
        <a href="#" class="back">BACK</a>
      </div>


    <div id="map"></div>


    <script>
    $(document).ready(function(){


        var map = L.map('map');

            L.tileLayer('http://{s}.tile.cloudmade.com/42dfb943872a465d89807eb88f6a1f4d/997@2x/256/{z}/{x}/{y}.png', {
                maxZoom: 18,
                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>'
            }).addTo(map);

            function onLocationFound(e) {
                var radius = e.accuracy / 2;

                L.marker(e.latlng).addTo(map)
                    .bindPopup("You are within " + radius + " meters from this point").openPopup();

                L.circle(e.latlng, radius).addTo(map);
            }

            function onLocationError(e) {
                alert(e.message);
            }

            map.on('locationfound', onLocationFound);
            map.on('locationerror', onLocationError);

            map.locate({setView: true, maxZoom: 16});
 });
    </script>
    </div>

感谢任何意见。

更新！ 刚刚发现我是否使用 http://{s}.tile.osm.org/{z}/{x}/{y}.png 而不是 http://{s}.tile.cloudmade.com/42dfb943872a465d89807eb88f6a1f4d /997/256/{z}/{x}/{y}.png 作为瓦片层然后渲染瓦片，为什么cloudemade的瓦片不渲染？

【问题讨论】：

标签： leaflet

【解决方案1】：

当我尝试加载它时，使用该 API-Key 时出现 403（禁止）错误。尝试再买一个 (you did request your own right?)。 OSM 工作的原因是它不需要 API-Key。

API-Key 是 url 的一部分，以 42dfb... 开头并转到 /。用一个好的钥匙替换它，你应该很高兴。

【讨论】：

嗨乔希，谢谢，但这是一个新密钥，但我会用一个新密钥进行测试。谢谢
我在 jsfiddle 中使用了您的代码和不同的 API 密钥。所以一定是钥匙坏了。
非常感谢乔希。您对在应用中离线绘制地图有任何意见吗？
没有线索。您可能想为此提出另一个问题。