React-Native Google Direction API无法正常工作

问题描述

我正在开发一个移动应用程序，我的目标是在地图上显示两个人之间的距离，为此我使用了Google Direction api，但是存在问题。两个位置之间的距离线不可见。我在这里留下了map.js代码和警告。

代码：

import React,{Component} from 'react';
import {View,Text} from 'react-native';
import MapView from 'react-native-maps';
import MapViewDirections from 'react-native-maps-directions';
export default class Map extends Component{
    state={
        region:{
            latitude: 37.78825,longitude: -122.4324,latitudeDelta: 0.015,longitudeDelta: 0.0121,}
    }
    componentwillMount(){
        console.log(this.props.data);
        const {yourLongLat}=this.props.data;
        this.setState({
               region:{
                latitude: yourLongLat[0],longitude: yourLongLat[1],latitudeDelta: 6,longitudeDelta: 6,}
 
        }
            
        )
    }
 render(){
    const {yourLongLat,herLongLat}=this.props.data;
    const origin = {latitude: yourLongLat[0],longitude: yourLongLat[1]};
    const destination = {latitude:herLongLat[0],longitude: herLongLat[1]};
    const GOOGLE_MAPS_APIKEY = 'don't show api keys';
     return(
         <View style={‌{flex:1,backgroundColor:'green'}}>
        <MapView
        style={‌{flex:1}}
        region={this.state.region}>
            <MapViewDirections
             origin={origin}
             destination={destination}
             apikey={GOOGLE_MAPS_APIKEY}
             strokeWidth={6}
             strokeColor="hotpink"
            />
        </MapView>
    
 
         </View>
     )
 }
}

İmages： enter image description here

enter image description here

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）