2016-06-16 1 views
-3

Ich bin wirklich neu in HTML und Javascript und ich habe ein endgültiges Projekt fällig und ich versuche, einige Daten von OSM und ich halten diese Fehler 'Unerwarteter Token < in JSON an Position 0'Anfänger Programmierung für eine Klasse, immer 'Unexpected Token <in JSON an Position 0'

Hier ist der Link auf die Karte ist so weit: http://gus8068sum16.github.io/FinalGroupProject.html

Und dies ist mein Code so weit:

<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> 

Jede Hilfe wäre sehr geschätzt

+0

EDIT: Mein Ziel ist es, die Knoten Daten von OSM zu ziehen und einige Funktionen alle auf dem Campus die Gebäude und Straßen zu umreißen zu bekommen, die ich dann Popups und solche mit ‚oneachfeature‘ hinzufügen kann – jspross93

+0

Sie müssen das verstehen Grundlagen von AJAX, um dies zu tun, und wenn Sie "bald fällig" Oh Junge bin, entschuldige ich mich für dich. Aber das Hauptproblem, das Sie atm haben, ist, dass Ihre Anfrage an den Server keine JSON-Datendatei zurückgibt, so dass eine Datei, die mit Dellirium

+0

Unser Professor hat AJAX nie erwähnt, daher wird von uns erwartet, dass wir dieses Projekt ohne es machen. Wir wurden gewissermaßen "ins Feuer geworfen", sozusagen in dieser Klasse ohne vorheriges Coding-Wissen. Haben Sie Beispiele, die den Code funktionieren lassen? – jspross93

Antwort

0

Ihr Hauptproblem besteht darin, dass Ihr Dienst XML und nicht Json zurückgibt. Sie sollten die XML-Antwort analysieren.

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

Die Daten, die in diesem Dokument aus www.openstreetmap.org ist. Die Daten werden unter ODbL zur Verfügung gestellt.

Einige Dienste können Sie für JSON fragen zurückgegeben werden, durch xhr.setResponseType = 'json' verwenden, aber dieser Service (overpass-api.de) ignoriert das und gibt noch xml.

Siehe Blog-Post hier zum Beispiel oder google zum Parsen von XML in Javascript. https://davidwalsh.name/convert-xml-json

Verwandte Themen