Question

我对世博会的反应型MapViewDirection有疑问。

我从onReady内部的MapViewDirection函数收到了结果。

我想向用户显示距离和持续时间字段。

 onReady={result => {

              console.log(result)
}};

我想声明自己正在学习，并且正在使用他人的代码进行练习。下面是完整的代码：

import React, { Component } from 'react';
import { Dimensions, StyleSheet } from 'react-native';
import MapView from 'react-native-maps';
import MapViewDirections from 'react-native-maps-directions';

const { width, height } = Dimensions.get('window');
const ASPECT_RATIO = width / height;
const LATITUDE = 40.3788;
const LONGITUDE = -105.5143;
const LATITUDE_DELTA = 0.0192;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

const GOOGLE_MAPS_APIKEY = 'AIzaSyAkwAlX2w0S3ba6OxBqr13JGDuYIi5GRZ8';

class Example extends Component {

  constructor(props) {
    super(props);


    this.state = {
      coordinates: [
        {
          latitude:40.3788,
          longitude:-105.5143,
        },

      ],
    };

    this.mapView = null;
  }

  onMapPress = (e) => {
    this.setState({
      coordinates: [
        ...this.state.coordinates,
        e.nativeEvent.coordinate,
      ],
    });
  }

  render() {
    return (
      <MapView
        initialRegion={{
          latitude: LATITUDE,
          longitude: LONGITUDE,
          latitudeDelta: LATITUDE_DELTA,
          longitudeDelta: LONGITUDE_DELTA,
        }}
        style={StyleSheet.absoluteFill}
        ref={c => this.mapView = c}
        onPress={this.onMapPress}
      >
        {this.state.coordinates.map((coordinate, index) =>
          <MapView.Marker key={`coordinate_${index}`} coordinate={coordinate} />
        )}
        {(this.state.coordinates.length >= 2) && (
          <MapViewDirections
            origin={this.state.coordinates[0]}
            waypoints={ (this.state.coordinates.length > 2) ? this.state.coordinates.slice(1, -1): null}
            destination={this.state.coordinates[this.state.coordinates.length-1]}
            apikey={GOOGLE_MAPS_APIKEY}
            strokeWidth={3}
            strokeColor="hotpink"
            optimizeWaypoints={true}
            onStart={(params) => {
              console.log(`Started routing between "${params.origin}" and "${params.destination}"`);
            }}
            onReady={result => {

              console.log(result);

              this.mapView.fitToCoordinates(result.coordinates, {
                edgePadding: {
                  right: (width / 20),
                  bottom: (height / 20),
                  left: (width / 20),
                  top: (height / 20),
                }
              });
            }}
            onError={(errorMessage) => {
              // console.log('GOT AN ERROR');
            }}
          />
        )}
      </MapView>
    );
  }
}

export default Example;

Answer 1

使用以下给定的代码，您可以使用纬度和经度来获得两个位置之间的距离。我们在这里使用Google距离矩阵API来获取距离。

  getDistanceOneToOne(lat1, lng1, lat2, lng2) 
  {
    const Location1Str = lat1 + "," + lng1;
    const Location2Str = lat2 + "," + lng2;
    let GOOGLE_API_KEY = "API_KEY"
    let ApiURL = "https://maps.googleapis.com/maps/api/distancematrix/json?"

    let params = `origins=${Location1Str}&destinations=${Location2Str}&key=${GOOGLE_API_KEY}`; // you need to get a key
    let finalApiURL = `${ApiURL}${encodeURI(params)}`;

    this.getDistance(finalApiURL).then((getDistance) => {
      console.log('Distance charges',getDistance);

      if (getDistance.status == "OK") 
      {

          let value = getDistance.rows[0].elements[0].distance.text; //Distance 
          let time = getDistance.rows[0].elements[0].duration.value; //time
      }    
  });
  }

    getDistance = (url) => {
        return this.getDistanceCall(url)
    }

    getDistanceCall = (url) => {

        return fetch(url, {
            method: 'GET',
        })
            .then((response) => { return response.json(); })
            .catch((error) => {
                return error;
            });
    }

反应本机地图数据访问

1 个答案: