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

Question

在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

实际上，在此代码中，我显示了一些标记列表，但是我不需要所有标记路线图...我只希望将某些特定标记添加到当前位置。

我在这里附上我想要的图像：

Answer 1

您需要查询以下内容：'https://maps.googleapis.com/maps/api/directions/'基本上，您必须给出起点和终点的坐标。更多信息：

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

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>
因此，每次您更新状态时，都会自动更新您的路线。如果您需要更多帮助，请随时提出更多问题