javascript - 混合应用 - 地图集成

Question

我正在使用（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>

但是这段代码只显示了起点和终点之间的地图，我想显示起点和终点之间的实时导航。像出租车预订应用程序。

标签： javascriptreactjsgoogle-mapsreact-nativeionic2

Answer 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,
  },
});