我正在使用（React-Native）处理移动应用程序，基本上我目前正在处理的主要功能是：。
以下是我用来呈现视图的代码：
<View style={ styles.container }>
<MapView
initialRegion = {{
latitude: this.state.origin.latitude,
longitude: this.state.origin.longitude,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA
}}
ref={(ref) => { this.mapRef = ref }}
onLayout = {() => this.mapRef.fitToCoordinates([{longitude: this.state.origin.longitude, latitude: this.state.origin.latitude}, {longitude: this.state.destination.longitude, latitude: this.state.destination.latitude}], { edgePadding: { top: 100, right: 10, bottom: 200, left: 10 }, animated: true })}
provider={ PROVIDER_GOOGLE }
style={ styles.map }
showsUserLocation={ true }
followsUserLocation={true}
loadingEnabled={true}
overlays={[{
coordinates: this.state.routeCoordinates,
strokeColor: '#19B5FE',
lineWidth: 10
}]}
>
<MapView.Marker
coordinate={ this.state.origin }
/>
<MapView.Marker
coordinate={ this.state.destination }
/>
<MapViewDirections
origin={this.state.origin}
destination={this.state.destination}
apikey={GOOGLE_MAPS_APIKEY}
strokeWidth={5}
strokeColor={'#000000'}
mode={'driving'}
onStart={(params) => {
console.log('Your journey has been started');
}}
onReady={(result) => {
console.log('Reach to the starting point to start journey');
}}
onError={(errorMessage) => {
alert(errorMessage);
}}
/>
</MapView>
<View style={styles.bottomBar}>
<View style={styles.bottomBarGroup}>
<Text style={styles.bottomBarHeader}>Directions</Text>
{this.state.directions.map((directionsObj, index) => (
<Text key={index} style={styles.bottomBarContent}>{directionsObj.html_instructions}
</Text>
))}
</View>
</View>
</View>
但是此代码仅显示原点和目的地之间的地图，我想显示原点和目的地之间的实时导航。喜欢 Cab Booking 应用程序。
答案 0 :(得分：1)
试试这个，它适合我。您必须使用谷歌方向API来获取原点和目的地之间的所有可能的位置点。
获得所有积分后，您可以使用多边形连接这些点，它将在您的原点和目的地之间绘制路线。
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,Dimensions
} from 'react-native';
import MapView from 'react-native-maps';
const mode = 'driving'; // 'walking';
const ASPECT_RATIO = width / height;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
const SPACE = 0.01;
const DEFAULT_PADDING = { top: 100, right: 100, bottom: 100, left: 100 };
const { width, height } = Dimensions.get('window');
export default class App extends Component<{}> {
constructor(props) {
super(props);
this.mapRef = null;
}
state = {
MARKERS : null,
origin :'22.9962,72.5996',
destination :'23.0134,72.5624',
destMarker : '',
startMarker :'',
imageloaded:false,
}
componentWillMount()
{
this.getRoutePoints(this.state.origin,this.state.destination);
}
/**
* This method will give you JSON response with all location points between 2 location
*/
getRoutePoints(origin,destination) {
console.log("-----getRoutePoints-----")
const url = `https://maps.googleapis.com/maps/api/directions/json?origin=${origin}&destination=${destination}&key=YOUR API KEY&mode=${mode}`;
console.log("URL -- >>" + url);
fetch(url)
.then(response => response.json())
.then(responseJson => {
if (responseJson.routes.length) {
var cortemp = this.decode(responseJson.routes[0].overview_polyline.points) // definition below;
var length = cortemp.length - 1;
var tempMARKERS = [];
tempMARKERS.push(cortemp[0]) ; //start origin
tempMARKERS.push(cortemp[length]); //only destination adding
console.log("tempMARKERS : " + JSON.stringify(tempMARKERS));
this.setState({
coords: cortemp,
MARKERS:tempMARKERS,
destMarker : cortemp[length],
startMarker:cortemp[0],
});
}
}).catch(e => { console.warn(e) });
}
/**
* This method will transforms something like this geocFltrhVvDsEtA}ApSsVrDaEvAcBSYOS_@... to an array of coordinates
*/
decode(t, e) {
for (var n, o, u = 0, l = 0, r = 0, d = [], h = 0, i = 0, a = null, c = Math.pow(10, e || 5); u < t.length;) {
a = null, h = 0, i = 0;
do a = t.charCodeAt(u++) - 63, i |= (31 & a) << h, h += 5; while (a >= 32);
n = 1 & i ? ~(i >> 1) : i >> 1, h = i = 0;
do a = t.charCodeAt(u++) - 63, i |= (31 & a) << h, h += 5; while (a >= 32);
o = 1 & i ? ~(i >> 1) : i >> 1, l += n, r += o, d.push([l / c, r / c])
}
return d = d.map(function (t) {
return {
latitude: t[0],
longitude: t[1]
}
})
}
/**
* After loading custome image of marker it will render map and refresh map will image
*/
forceUpdateMap() {
console.log("-----forceUpdateMap------")
this.setState({ imageloaded: true });
}
/**
* This method will fit all markers point into single screen
*/
fitAllMarkers() {
const temMark = this.state.MARKERS;
console.log( "------fitAllMarkers------")
this.setState({loading:false});
if (this.mapRef == null) {
console.log("map is null")
} else {
//option:1
console.log("temMark : " + JSON.stringify(temMark));
this.mapRef.fitToCoordinates(temMark, {
edgePadding: DEFAULT_PADDING,
animated: false,
});
}
}
render() {
return (
<View style={styles.container}>
{
(this.state.coords != null) ?
<MapView
ref={ref => { this.mapRef = ref; }}
style={styles.map}
onLayout={() => this.fitAllMarkers()}>
{/*used to drae line on rout point of locations*/}
< MapView.Polyline
coordinates={this.state.coords}
strokeWidth={2}
/>
{/*start point marker*/}
<MapView.Marker
key={1}
coordinate={this.state.startMarker}
/>
{/*end point marker*/}
<MapView.Marker
key={2}
coordinate={this.state.destMarker}
>
</MapView.Marker>
</MapView> : null
}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
map: {
...StyleSheet.absoluteFillObject,
},
});