2016-06-16 2 views
-3

Я действительно новичок в HTML и Javascript, и вскоре у меня есть окончательный проект, и я пытаюсь вызвать некоторые данные из OSM и I постоянно получаю эту ошибку «Неожиданный маркер < в формате JSON в положении 0»Начальное программирование для класса, продолжайте получать «Неожиданный токен <в JSON в позиции 0»

Вот ссылка на карту до сих пор: http://gus8068sum16.github.io/FinalGroupProject.html

И это мой код до сих пор:

<html> 
<head> 

    <style> 
    body {background-color: #C70039;} 

    h1 {text-align: center;} 
    h1 {color: #FFFFFF;} 
    h1 {font-family: Georgia 
      font-style:normal; 
      font-weight: bold;} 

    h2 {text-align: center;} 
    h2 {color: #FFFFFF;} 
    h2 {font-family: Georgia 
      font-style: italic; 
      font-weight: normalc;} 

    div {border-style: outset; 
      border-color: #000000; 
      border-width: 3px; 
    } 

    </style> 

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" /> 

</head> 

<body> 

    <h1> Temple University Main Campus Map </h1> 
    <h2>Use this map to find your way around Temple University Main Campus in Philadelphia </h2> 
    <div id="tumap" style="height:900px; width:1300px; margin:auto"></div> 

    <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script> 
    <script> 

     var tumap = L.map('tumap').setView([39.981450,-75.154386], 17); 

     L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', { 
    attribution: 'Contributors Elijah Diaz-Cruz, Jodie Spross, Laura Trzaska & Taryn Weisberg', 
    maxZoom: 18, 
    id: 'jspross93.0d4ecll6', 
    accessToken: 'pk.eyJ1IjoianNwcm9zczkzIiwiYSI6ImNpcGVtcXo3cTAwMDFzdG5jc2lxdnN1NmEifQ.8-EK8kM2Apv_vSawAqfw0g' 
}).addTo(tumap); 

//function onEachFeature(feature, layer) { 
// if (feature.properties && feature.properties.popupContent) { 
//  layer.bindPopup(feature.properties.popupContent); 
     //for when we are ready with the feature 
// } 
//}; 

var xhr = new XMLHttpRequest(); 

xhr.open("GET", "http://overpass-api.de/api/xapi?map?bbox=-75.16196,39.97636,-75.14511,39.98475", false); 
xhr.send(); 

var myJsonDictionary = JSON.parse(xhr.responseText); 

L.geoJson(myJsonDictionary, {onEachFeature: onEachFeature}).addTo(tumap); 

    </script> 

</body> 
</head> 
</html> 

Любая помощь был бы очень признателен

+0

EDIT: моя цель состоит в том, чтобы вытащить данные узла из OSM и получить некоторые функции обрисовать все здания и дороги на территории кампуса, который я могу затем добавить всплывающие окна и такие с помощью «oneachfeature» – jspross93

+0

Вы должны понять основы AJAX, чтобы сделать это, и если вы «скоро», о, мальчик, извините. Но основная проблема, с которой вы столкнулись, заключается в том, что ваш запрос на сервер не возвращает файл данных JSON, поэтому файл, начинающийся с Dellirium

+0

Наш профессор никогда не упоминал AJAX, поэтому мы должны делать этот проект без него. Мы как бы «бросили в огонь», так сказать, в этом классе, без каких-либо знаний о кодировании. Есть ли у вас примеры, которые могли бы заставить код работать? – jspross93

ответ

0

Основная проблема заключается в том, что ваша служба возвращает XML, а не Json вообще. вы должны проанализировать ответ XML.

<?xml version="1.0" encoding="UTF-8"?> 

Данные, включенные в этот документ из www.openstreetmap.org. Данные доступны в ODbL.

Некоторые услуги позволяют вам попросить JSON, чтобы быть возвращены, используя xhr.setResponseType = '' JSON, но эта услуга (overpass-api.de) игнорирует, что и до сих пор возвращает XML.

См., Например, сообщение в блоге или Google для анализа XML в javascript. https://davidwalsh.name/convert-xml-json