.JSONリストをgoogleマップに変換する

Question

こんにちは私は、ホームネットワークに接続されたパイの航空機jsonリストを持っています。私は、flightradar24.comなどと同様のGoogleマップフォーマットに変換したいと思います。それほど遠くはない。任意の助けが良いだろう私は非常に良い説明ではないので、コーディングの初心者です。感謝:)ここ

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

は

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>