我有一个关于与世博会反应原生MapViewDirection的问题。

我从MapViewDirectiononReady函数收到了我的结果。

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

 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; 

在此处输入图片说明

在此处输入图片说明

#1楼 票数:1 已采纳

使用下面给出的代码,您可以使用纬度和经度获得两个位置之间的距离。 我们在这里使用谷歌距离矩阵 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;
            });
    }

  ask by Aashish Sapkota translate from so

未解决问题?本站智能推荐:

2回复

在React-Native中访问this.state

嗨,我是React的新手,所以请耐心等待。 我想将地理位置存储为州。 看起来很漂亮,因为任何位置变化都会触发渲染,这正是我想要的。 在开发过程中,我有一个按钮,通过访问lastPosition手动触发事件。 但是,当我这样做。 国家是“未定义的”。 有什么线索的原因?
1回复

如何访问 react-native-maps 中的坐标?

我正在尝试通过使用 react-native-maps 中的“坐标”道具在我的反应本机应用程序中使用用户的当前位置。 问题是,当我尝试 console.log currentLocation.coords 时出现错误: 但是当我 console.log currentLocation 时,我可
2回复

如何使textinput背景在react-native上的地图上透明

如何使外部textinput背景透明,使其看起来像在地图内部,而不是在顶部? 提前致谢!
9回复

使用 React-Native 导航传递数据

我试图在我的应用程序的屏幕之间传递数据。 目前我正在使用 我有我的 index.js 应用程序作为 然后在 secondscreen.js 中我们将获取从前一个屏幕传递的数据作为 每当我 console.log 我得到未定义。 https://reactnavigation.
9回复

React-Native 获取 XML 数据

我是 React-Native 的新手。 尝试制作一些非常简单的应用程序。 无法弄清楚如何获取 XML 数据。 使用 JSON,一切都变得清晰而简单。 但是如何获取 XML? 试图通过这个和其他一些类似的脚本将它转换为 JSON,但没有任何成功。 需要帮忙 :/ 我的代码看起来很简单:
1回复

带获取的React-Native数组数据分配

作为一名初学者,我正在开发一个响应式的移动应用程序。 我在使用react-native时有一个小问题。 让我详细解释一下,我想做的是从Restful api获取数据并将此数据分配给react中的数组。 下面是我的代码,用于填充数组数据。 上面是我所有的.Js文件,它没有类声明。
2回复

React-native组件状态数据

请检查图像 单击每个标题时如何更改以下内容1)文本颜色和下划线2)如下所示的数据 这个想法是让用户单击文本,然后将其切换到下面的数据以更改文本。 我知道状态必须以某种方式与诸如onClick的辅助函数一起使用。 但是,如果有人可以具体解释,那将是很棒的。 谢谢 这就是我当
1回复

react-Native:在父组件内部访问子组件函数

目标:创建一个可重用的OptionFan组件,该组件允许子级作为ChildButton组件。 问题:无法在OptionFan(父)组件方法“ showOptions()”内访问ChildButton的方法“ flyOut()” 在选件风扇组件中: 在ChildButton组件中: