如何显示从当前位置到某个目的地（某个地址）位置的路线图？答案

【问题标题】：How can I show a route map from the current location to some destination (some address) location?如何显示从当前位置到某个目的地（某个地址）位置的路线图？
【发布时间】：2017-10-21 00:12:21
【问题描述】：

在 React Native 中，我正在使用 react-native-maps 开发一个示例应用程序。它工作正常，但我没有发现：如何将 RouteMap 从当前位置显示到另一个地址或位置？

这是我的代码：

<MapView
    ref='map'
    style={styles.map}
    region={this.state.mapRegion}
    showsUserLocation={true}
    followUserLocation={true}
    zoomEnabled={true}
    pitchEnabled={true}
    showsCompass={true}
    showsBuildings={true}
    showsTraffic={true}
    showsIndoors={true}
    onRegionChange={this.onRegionChange.bind(this)}
    onPress={this.onMapPress.bind(this)}
>
    {this.state.markers.map(marker => (
        <MapView.Marker
                coordinate={{
                  latitude:  marker.Latitude  || this.state.lastLat  || region.latitude,
                  longitude: marker.Longitude || this.state.lastLong || region.longitude
                }}
                image = {
                 marker.EmergencyService == true ?(
                   require('./Imgs/emergencyService.png')):
                   (require('./Imgs/regularService.png'))
                }
                onCalloutPress={() => this.bookDoctorsAppointment(marker)}
        >                
            <MyCustomMarkerView marker={marker}  navigator={this.props.navigator}/>
        </MapView.Marker>
    ))}
</MapView>

实际上，在这段代码中，我显示了一些标记列表，但我不需要所有标记路线图...我只想要当前位置的一些特定标记。

我在这里附上了我想要的图片：

【问题讨论】：

标签： android react-native react-native-maps

【解决方案1】：

您需要查询：'https://maps.googleapis.com/maps/api/directions/'

基本上，您必须提供起点和终点坐标。更多信息： https://developers.google.com/maps/documentation/directions/start

你应该用这个来解析答案：

export function 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.map(
               function (t) {
                   return {latitude: t[0], longitude: t[1]}
               })
}

// 该函数选自https://github.com/airbnb/react-native-maps/issues/929

响应，我存储在状态中：

that.setState({
    route: [decode(res)]
})

renderRoute (coordinates, i) {
    return (
        <MapView.Polyline
          key={i}
          coordinates={coordinates}
          strokeColor={......}
          strokeWidth={4}
        />
    );
}

render () {

    return (
        <MapView
            showsUserLocation
            followsUserLocation
            loadingEnabled
        >
            {this.state.route.map(this.renderRoute)}
        </MapView>

因此，每次您更新状态时，都会自动更新您的路线。

【讨论】：