Я получаю свои данные из Google Directions и потому, как был настроен ответ JSON, например:
Object {
"geocoded_waypoints": Array [
Object {
"geocoder_status": "OK",
"place_id": "ChIJ2YDFT9zweUgRgt5Tws6n3hs",
"types": Array [
"premise",
],
},
Object {
"geocoder_status": "OK",
"place_id": "ChIJW2PCihXxeUgRRWgA9kOzpjY",
"types": Array [
"establishment",
"food",
"lodging",
"point_of_interest",
"restaurant",
],
},
],
"routes": Array [
Object {
"bounds": Object {
"northeast": Object {
"lat": 52.9242042,
"lng": -1.4751044,
},
"southwest": Object {
"lat": 52.900484,
"lng": -1.4801554,
},
},
"copyrights": "Map data ©2018 Google",
"legs": Array [
Object {
"distance": Object {
"text": "3.1 km",
"value": 3137,
},
"duration": Object {
"text": "38 mins",
"value": 2309,
},
"end_address": "Full St, Derby DE1 3AF, UK",
"end_location": Object {
"lat": 52.9242042,
"lng": -1.4756769,
},
"start_address": "50 Chatham St, Derby DE23 8TH, UK",
"start_location": Object {
"lat": 52.900484,
"lng": -1.4801443,
},
"steps": Array [
Object {
"distance": Object {
"text": "3.1 km",
"value": 3137,
},
"duration": Object {
"text": "38 mins",
"value": 2309,
},
"end_location": Object {
"lat": 52.9242042,
"lng": -1.4756769,
},
"html_instructions": "Walk to Full St, Derby DE1 3AF, UK",
"polyline": Object {
"points": "_c{aIza`Hm@BEyHC_AyAk@iCw@KCGAGAMBSFE@iBz@C@E@QDe@TMFUHWJm@TIm@k@_Em@yDuE`BIDw@SEPCJGPINILEDGFWTcBbAwB~@WJ]PIDOHWNMJ?@@??@?@?@A??@?@?@A??@?@A??@A?A??@AAA?A??AA??A?AA??AI@EBGBOHo@XGBIDKBGBG@G@G@OBu@JG@KBID?A?AA??AA??AA?A?A??@A??@A??@?@?@]UGG}AiAcAu@g@a@kAw@c@Wu@_@c@U}@e@y@g@WQKGGEEAWGc@Iq@EW?k@?M@g@FoBPq@J[HSDIBGB]Ja@RcAdAYX{AdAq@Ry@Hu@BU?yA@g@AYAAIAG?CAECGACCGEEEECCEAICK?C@A@A?C@C@EDCBABCDABABCDGYgBkBwBsBw@y@GCGAYe@cAqACCAECE?C?G@Kc@NC@gBj@MDKDaBdAq@^GHCFCFCNCFEHEFwCZi@@MAMCIIMOSa@Yq@Oc@Qk@CEKc@EQWuAG?ICCIAKAKKFIDIFE@OPONMLa@h@?@",
},
"start_location": Object {
"lat": 52.900484,
"lng": -1.4801443,
},
"steps": Array [
Object {
"distance": Object {
"text": "26 m",
"value": 26,
},
"duration": Object {
"text": "1 min",
"value": 17,
},
"end_location": Object {
"lat": 52.9007148,
"lng": -1.4801554,
},
"html_instructions": "Head <b>north</b> on <b>Chatham St</b> toward <b>Randolph Rd</b>",
"polyline": Object {
"points": "_c{aIza`Hm@B",
},
"start_location": Object {
"lat": 52.900484,
"lng": -1.4801443,
},
"travel_mode": "WALKING",
},
Object {
"distance": Object {
"text": "0.1 km",
"value": 126,
},
"duration": Object {
"text": "1 min",
"value": 88,
},
"end_location": Object {
"lat": 52.9007561,
"lng": -1.4782714,
},
"html_instructions": "Turn <b>right</b> onto <b>Randolph Rd</b>",
"maneuver": "turn-right",
"polyline": Object {
"points": "md{aI~a`HEyHC_A",
},
"start_location": Object {
"lat": 52.9007148,
"lng": -1.4801554,
},
"travel_mode": "WALKING",
},
Object {
"distance": Object {
"text": "0.3 km",
"value": 332,
},
"duration": Object {
"text": "4 mins",
"value": 223,
},
"end_location": Object {
"lat": 52.90362829999999,
"lng": -1.4785171,
},
"html_instructions": "Turn <b>left</b> onto <b>St Thomas Rd</b>",
"maneuver": "turn-left",
"polyline": Object {
"points": "wd{aIdv_HyAk@iCw@KCGAGAMBSFE@iBz@C@E@QDe@TMFUHWJm@T",
},
"start_location": Object {
"lat": 52.9007561,
"lng": -1.4782714,
},
"travel_mode": "WALKING",
},
Object {
"distance": Object {
"text": "0.2 km",
"value": 153,
},
"duration": Object {
"text": "2 mins",
"value": 104,
},
"end_location": Object {
"lat": 52.90412999999999,
"lng": -1.4763973,
},
"html_instructions": "Turn <b>right</b> to stay on <b>St Thomas Rd</b>",
"maneuver": "turn-right",
"polyline": Object {
"points": "uv{aIvw_HIm@k@_Em@yD",
},
"start_location": Object {
"lat": 52.90362829999999,
"lng": -1.4785171,
},
"travel_mode": "WALKING",
},
Object {
"distance": Object {
"text": "0.1 km",
"value": 129,
},
"duration": Object {
"text": "2 mins",
"value": 103,
},
"end_location": Object {
"lat": 52.9052488,
"lng": -1.4769249,
},
"html_instructions": "Turn <b>left</b> onto <b>Portland St</b>",
"maneuver": "turn-left",
"polyline": Object {
"points": "yy{aInj_HuE`BID",
},
"start_location": Object {
"lat": 52.90412999999999,
"lng": -1.4763973,
},
"travel_mode": "WALKING",
},
Object {
"distance": Object {
"text": "32 m",
"value": 32,
},
"duration": Object {
"text": "1 min",
"value": 24,
},
"end_location": Object {
"lat": 52.9055291,
"lng": -1.4768217,
},
"html_instructions": "Slight <b>right</b> at <b>Goodale St</b>",
"maneuver": "turn-slight-right",
"polyline": Object {
"points": "y`|aIvm_Hw@S",
},
"start_location": Object {
"lat": 52.9052488,
"lng": -1.4769249,
},
"travel_mode": "WALKING",
},
Object {
"distance": Object {
"text": "0.4 km",
"value": 418,
},
"duration": Object {
"text": "5 mins",
"value": 325,
},
"end_location": Object {
"lat": 52.9089381,
"lng": -1.4789711,
},
"html_instructions": "Turn <b>left</b> onto <b>Pear Tree Rd</b><div style=\"font-size:0.9em\">Go through 1 roundabout</div>",
"maneuver": "turn-left",
"polyline": Object {
"points": "qb|aIbm_HEPCJGPINILEDGFWTcBbAwB~@WJ]PIDOHWNMJ?@@??@?@?@A??@?@?@A??@?@A??@A?A??@AAA?A??AA??A?AA??AI@EBGBOHo@XGBIDKBGBG@G@G@OBu@JG@KBID",
},
"start_location": Object {
"lat": 52.9055291,
"lng": -1.4768217,
},
"travel_mode": "WALKING",
},
Object {
"distance": Object {
"text": "1.0 km",
"value": 984,
},
"duration": Object {
"text": "13 mins",
"value": 760,
},
"end_location": Object {
"lat": 52.9173185,
"lng": -1.4781371,
},
"html_instructions": "At the roundabout, take the <b>1st</b> exit onto <b>Normanton Rd</b>",
"maneuver": "roundabout-left",
"polyline": Object {
"points": "{w|aIpz_H?A?AA??AA??AA?A?A??@A??@A??@?@?@]UGG}AiAcAu@g@a@kAw@c@Wu@_@c@U}@e@y@g@WQKGGEEAWGc@Iq@EW?k@?M@g@FoBPq@J[HSDIBGB]Ja@RcAdAYX{AdAq@Ry@Hu@BU?yA@g@AYA",
},
"start_location": Object {
"lat": 52.9089381,
"lng": -1.4789711,
},
"travel_mode": "WALKING",
},
Object {
"distance": Object {
"text": "0.3 km",
"value": 272,
},
"duration": Object {
"text": "3 mins",
"value": 207,
},
"end_location": Object {
"lat": 52.9193378,
"lng": -1.4764257,
},
"html_instructions": "At the roundabout, take the <b>3rd</b> exit onto <b>Babington Ln</b>",
"maneuver": "roundabout-left",
"polyline": Object {
"points": "gl~aIju_HAIAG?CAECGACCGEEEECCEAICK?C@A@A?C@C@EDCBABCDABABCDGYgBkBwBsBw@y@GCGA",
},
"start_location": Object {
"lat": 52.9173185,
"lng": -1.4781371,
},
"travel_mode": "WALKING",
},
Object {
"distance": Object {
"text": "82 m",
"value": 82,
},
"duration": Object {
"text": "1 min",
"value": 54,
},
"end_location": Object {
"lat": 52.91985400000001,
"lng": -1.4756332,
},
"html_instructions": "Slight <b>right</b> to stay on <b>Babington Ln</b>",
"maneuver": "turn-slight-right",
"polyline": Object {
"points": "{x~aItj_HYe@cAqACCAECE?C?G@K",
},
"start_location": Object {
"lat": 52.9193378,
"lng": -1.4764257,
},
"travel_mode": "WALKING",
},
Object {
"distance": Object {
"text": "0.2 km",
"value": 217,
},
"duration": Object {
"text": "2 mins",
"value": 144,
},
"end_location": Object {
"lat": 52.9216227,
"lng": -1.4768472,
},
"html_instructions": "Turn <b>left</b> onto <b>St Peters St</b>",
"maneuver": "turn-left",
"polyline": Object {
"points": "a|~aIte_Hc@NC@gBj@MDKDaBdAq@^GHCFCFCNCFEHEF",
},
"start_location": Object {
"lat": 52.91985400000001,
"lng": -1.4756332,
},
"travel_mode": "WALKING",
},
Object {
"distance": Object {
"text": "0.3 km",
"value": 266,
},
"duration": Object {
"text": "3 mins",
"value": 186,
},
"end_location": Object {
"lat": 52.9234756,
"lng": -1.4752851,
},
"html_instructions": "Slight <b>right</b> onto <b>Corn Market</b>",
"maneuver": "turn-slight-right",
"polyline": Object {
"points": "cg_bIhm_HwCZi@@MAMCIIMOSa@Yq@Oc@Qk@CEKc@EQWuA",
},
"start_location": Object {
"lat": 52.9216227,
"lng": -1.4768472,
},
"travel_mode": "WALKING",
},
Object {
"distance": Object {
"text": "0.1 km",
"value": 100,
},
"duration": Object {
"text": "1 min",
"value": 74,
},
"end_location": Object {
"lat": 52.9242042,
"lng": -1.4756769,
},
"html_instructions": "At the roundabout, take the <b>2nd</b> exit onto <b>Full St</b><div style=\"font-size:0.9em\">Destination will be on the right</div>",
"maneuver": "roundabout-left",
"polyline": Object {
"points": "wr_bIpc_HG?ICCIAKAKKFIDIFE@OPONMLa@h@?@",
},
"start_location": Object {
"lat": 52.9234756,
"lng": -1.4752851,
},
"travel_mode": "WALKING",
},
],
"travel_mode": "WALKING",
},
],
"traffic_speed_entry": Array [],
"via_waypoint": Array [],
},
],
"overview_polyline": Object {
"points": "_c{aIza`Hm@BEyHC_AyAk@uC{@OCa@JoB|@IBw@ZiBr@u@mFm@yDuE`BIDw@SI\\Q`@OR_@\\cBbAwB~@u@\\YNe@\\@??BA@?DCBE@EEAAg@RmAf@yB^IBAAAACACBA@?@e@[uGyE{DsBeBgA]IuAOcA?u@HoBPq@Jo@NQF]Ja@R}A~A{AdAq@RoBLoB@aACCQGUSWOEO@KDORCFCDGY_F_F_A}@GAYe@gAuAEW@Kc@NkBl@YJsCdBKPGVIPEFwCZw@?WMa@q@i@uAg@gBWuAG?ICCICWULOH_@`@o@x@",
},
"summary": "Normanton Rd",
"warnings": Array [
"Walking directions are in beta. Use caution – This route may be missing sidewalks or pedestrian paths.",
],
"waypoint_order": Array [],
},
],
"status": "OK",
}
Я пытаюсь получить данные из данных о транзите, которые имеют значения широты и долготы, которые я пытаюсь получить, чтобы иметь возможность просматривать это на карте с помощью MapView в React native, и я считаю, что мне это удалось так как это моя попытка получить данные, устанавливающие состояние:
fetch('https://maps.googleapis.com/maps/api/directions/json?origin=' + latitude + ',' + longitude + '&destination=' + goingto + '&mode=transit&transit_mode=bus&key=' + apiDirectionskey)
.then((resdirections) => resdirections.json())
.then((responseJson4) => {
//const departureloc1 = responseJson4.routes[0].legs[0].steps[1];
//console.log(departureloc1)
const departureloc = responseJson4.routes[0].legs[0].steps[1].transit_details.departure_stop.location;
console.log(departureloc);
const stopmarkers = Object.keys(departureloc).map(value => {
// noinspection JSAnnotator
if (typeof departureloc['lat'] === undefined && typeof departureloc['lng'] === undefined) {
console.log('null');
} else {
return {
latlng: {
latitude: departureloc['lat'],
longitude: departureloc['lng']
}
}
}
this.setState({ departureloc: stopmarkers });
});
})
}
печать приведенного выше вызова извлечения приведет к этому результату JSON
Object {
"lat": 52.90736,
"lng": -1.453532,
}
Следующий раздел - это моя функция рендеринга, которая имеет вид карты в моей попытке установить маркеры.
<View style={styles.container}>
<Mainlogo/>
<TextInput style={styles.boxInput} underlineColorAndroid='rgba(0,0,0,0)' placeholder="Going To?"
underlineColorAndroid='transparent'
onChangeText={(dest) => this.setState({goingto : dest})}
/>
<TouchableOpacity style={styles.button} onPress={this.fetchDirections.bind(this)}>
<Text style={styles.textButton}> Go {this.props.type}</Text>
</TouchableOpacity>
{this.state.departureloc.map(marker => (
<MapView.Marker
coordinate={marker.latlng}
image={require('../img/busstop1.png')}
/>
))}
</MapView> : <Text style={{fontWeight: 'bold', color: '#546e7a', textAlign: 'center'}}>Please wait.. loading</Text>}
</View>
На этом этапе у меня нет успеха, и вместо этого я не могу обойти эту ошибку.
Я очень новичок в этом, и любой, кто может направить меня и дать подсказки на правильном пути, был бы очень признателен, спасибо