2013-09-24 3 views
0

Привет Я делаю приложение phonegap, которое загружает мои подстраницы с помощью ajax и в одном из них. Я пытаюсь загрузить карту буклета. Это не рендеринг плитки? Я не знаю, что мне не хватает?Загрузка карты буклета в загруженной странице 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/[email protected]/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 как слой плитки, тогда он отображает плитки, почему же это не плитки из облачной рендеринга?

ответ

1

Когда я попытался загрузить его, я получил 403 (Forbidden) ошибку, используя этот API-ключ. Попробуйте получить еще один (you did request your own right?). Причина, по которой работает OSM, заключается в том, что для нее не требуется API-ключ.

API-ключ - это часть URL-адреса, которая начинается с 42dfb ... и переходит в /. Замените это хорошим ключом, и вам должно быть хорошо идти.

+0

Привет, Джош, спасибо, но это был новый ключ, но я буду тестировать с новым. Спасибо –

+0

У меня есть работа с вашим кодом и другим API-ключом здесь, в этом [jsfiddle] (http://jsfiddle.net/PzqNw/1/). Так что это должен быть ключ, который был как-то плохим. – Josh

+0

Большое спасибо Джошу. У вас есть какие-либо данные о том, как делать карту офлайн в приложении? –