Konvertieren .JSON-Liste in Google Maps

Question

Hallo Ich habe eine Flugzeug Json-Liste auf einem Pi mit einem Heimnetzwerk verbunden, das ich in ein Google Maps-Format ähnlich wie flightradar24.com usw. konvertieren möchte. Ich habe mehrere Möglichkeiten ausprobiert, aber haben nicht sehr weit. Jede Hilfe wäre gut, ich bin nur ein Anfänger mit Codierung, also entschuldige die nicht so gute Erklärung. Thanks :)

{ "now" : 1497814126.3, 
    "messages" : 20531195, 
    "aircraft" : [ 
    {"hex":"c82089","squawk":"5625","flight":"ANZ519 ","altitude":3250,"vert_rate":3008,"track":79,"speed":225,"messages":88,"seen":69.0,"rssi":-24.9}, 
    {"hex":"c81881","squawk":"0262","flight":"ANZ101 ","lat":-36.881150,"lon":174.829440,"nucp":7,"seen_pos":0.3,"altitude":9725,"vert_rate":3136,"track":269,"speed":330,"messages":1360,"seen":0.1,"rssi":-8.1}, 
    {"hex":"aae597","squawk":"0767","flight":"AAL83 ","lat":-36.149918,"lon":175.464592,"nucp":7,"seen_pos":0.4,"altitude":23400,"vert_rate":-1792,"track":212,"speed":386,"messages":1734,"seen":0.1,"rssi":-24.8}, 
    {"hex":"c81dd5","squawk":"0256","flight":"QFA140 ","lat":-36.892043,"lon":174.183456,"nucp":7,"seen_pos":0.0,"altitude":21800,"vert_rate":2240,"track":270,"speed":398,"messages":4023,"seen":0.0,"rssi":-27.1}, 
    {"hex":"c8178c","squawk":"0260","flight":"ANZ937 ","lat":-36.605002,"lon":173.758772,"nucp":6,"seen_pos":52.9,"altitude":26675,"vert_rate":1152,"track":295,"speed":412,"messages":4913,"seen":1.4,"rssi":-32.3} 
    ] 
} 

Answer 1

Hier ist eine Demo, die zeigt, wie Breiten-/Längendaten als Markierungen auf einer Karte alot

var data = [{ 
 
    "hex": "c82089", 
 
    "squawk": "5625", 
 
    "flight": "ANZ519 ", 
 
    "altitude": 3250, 
 
    "vert_rate": 3008, 
 
    "track": 79, 
 
    "speed": 225, 
 
    "messages": 88, 
 
    "seen": 69.0, 
 
    "rssi": -24.9 
 
    }, 
 
    { 
 
    "hex": "c81881", 
 
    "squawk": "0262", 
 
    "flight": "ANZ101 ", 
 
    "lat": -36.881150, 
 
    "lon": 174.829440, 
 
    "nucp": 7, 
 
    "seen_pos": 0.3, 
 
    "altitude": 9725, 
 
    "vert_rate": 3136, 
 
    "track": 269, 
 
    "speed": 330, 
 
    "messages": 1360, 
 
    "seen": 0.1, 
 
    "rssi": -8.1 
 
    }, 
 
    { 
 
    "hex": "aae597", 
 
    "squawk": "0767", 
 
    "flight": "AAL83 ", 
 
    "lat": -36.149918, 
 
    "lon": 175.464592, 
 
    "nucp": 7, 
 
    "seen_pos": 0.4, 
 
    "altitude": 23400, 
 
    "vert_rate": -1792, 
 
    "track": 212, 
 
    "speed": 386, 
 
    "messages": 1734, 
 
    "seen": 0.1, 
 
    "rssi": -24.8 
 
    }, 
 
    { 
 
    "hex": "c81dd5", 
 
    "squawk": "0256", 
 
    "flight": "QFA140 ", 
 
    "lat": -36.892043, 
 
    "lon": 174.183456, 
 
    "nucp": 7, 
 
    "seen_pos": 0.0, 
 
    "altitude": 21800, 
 
    "vert_rate": 2240, 
 
    "track": 270, 
 
    "speed": 398, 
 
    "messages": 4023, 
 
    "seen": 0.0, 
 
    "rssi": -27.1 
 
    }, 
 
    { 
 
    "hex": "c8178c", 
 
    "squawk": "0260", 
 
    "flight": "ANZ937 ", 
 
    "lat": -36.605002, 
 
    "lon": 173.758772, 
 
    "nucp": 6, 
 
    "seen_pos": 52.9, 
 
    "altitude": 26675, 
 
    "vert_rate": 1152, 
 
    "track": 295, 
 
    "speed": 412, 
 
    "messages": 4913, 
 
    "seen": 1.4, 
 
    "rssi": -32.3 
 
    } 
 
]; 
 

 
function initMap() { 
 
    var myLatLng = { 
 
    lat: -36.363, 
 
    lng: 175.044 
 
    }; 
 

 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 6, 
 
    center: myLatLng 
 
    }); 
 

 
    for (var i = 0; i < data.length; i++) { 
 
    var flight = data[i], 
 
     latLng = new google.maps.LatLng(flight.lat, flight.lon); 
 

 
    // Creating a marker and putting it on the map 
 
    var marker = new google.maps.Marker({ 
 
     position: latLng, 
 
     map: map, 
 
     title: data.flight 
 
    }); 
 
    } 
 

 
}

#map { 
 
    height: 100%; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAIPPUQ0PSWMjTsgvIWRRcJv3LGfRzGmnA&callback=initMap"> 
 
</script> 
 

 

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