将带方向的MapView发送到Google Maps应用(React Native)

时间:2019-11-20 04:41:20

标签: react-native google-maps expo

我有一个使用expo和React Native构建MapView的应用程序,我希望将带有航点的创建地图发送到某人手机上的Google Maps应用程序。 有什么方法可以将我在应用程序中建立的路线信息发送到Google Maps应用程序?

以下是我正在使用的一些代码段:

import React from 'react';
import { ... } from '...';


//Import map
import MapView from 'react-native-maps';
import MapViewDirections from 'react-native-maps-directions';

const dest = {latitude: -37.836037, longitude: 145.036730};

const waypoint = [
    {address: '123 Fake St, Test', latitude: -37.861738, longitude: 145.002500},
    {address: '321 Real St, Test', latitude: -37.806694, longitude: 145.010026},
    {address: '432 Fake St, Test', latitude: -37.834924, longitude: 145.123425},
    {address: '543 Real St, Test', latitude: -37.853932, longitude: 145.012434}
];

const GOOGLE_MAPS_APIKEY = 'MAPAPI';


class TodaysJobs extends React.Component {

    state = {
        location: null,
        errorMessage: null,
    };

    //Get user current location
    componentWillMount() {
        ...
    }

    _getLocationAsync = async () => {
        ....
    };


    render() {
        if (this.state.loaded) {
            // if we have an error message show it
            if (this.state.errorMessage) {
                return (
                   ...
                );
            } else if (this.state.location) {
                // if we have a location show it
                return (
                    <View style={{ flex: 1 }}>
                        <MapView
                            region={{
                                latitude: this.state.location.coords.latitude,
                                longitude: this.state.location.coords.longitude
                            }}
                        >
                            {waypoint.map(function(item, i){
                                return <MapView.Marker
                                    key={i}
                                    coordinate={item}
                                />
                            })}
                            <MapViewDirections
                                origin={this.state.location.coords}
                                waypoints={waypoint}
                                destination={dest}
                                apikey={GOOGLE_MAPS_APIKEY}
                            />
                        </MapView>
                    </View>
                );
            }
        } else {
            // if we haven't loaded show a waiting placeholder
            return (
                <View style={styles.container}>
                    <Text>Waiting...</Text>
                </View>
            );
        }
    }
}

export default TodaysJobs;

0 个答案:

没有答案