如何使用 HERE <Polyline /> 在 react-native-maps 中跟随道路 API

Question

我能够向 HERE API 发出请求并得到响应，我将所有 waypoints 从腿到一个数组（纬度和经度）并且它确实绘制了一条折线但是它不遵循道路。它只是穿过建筑物等

这是我的折线组件：

<Polyline coordinates={this.state.route} strokeWidth={7} strokeColor="#2ecc71" geodesic={true} />

this.state.route 是我得到的坐标数组：

axios.get(`https://route.api.here.com/routing/7.2/calculateroute.json?app_id={myappid}&app_code={myappcode}&waypoint0=geo!${from_lat},${from_long}&waypoint1=geo!${to_lat},${to_long}&mode=fastest;bicycle;traffic:disabled`).then((response) => {
      console.log(response.data.response.route);
      response.data.response.route[0].leg[0].maneuver.map((m) => {
        routeCoordinates.push({latitude: m.position.latitude, longitude: m.position.longitude});
      })
      console.log(routeCoordinates);
      this.props.navigation.navigate('ShowMap', {
        spot: chosenSpot,
        route: routeCoordinates,
      });  
    }).catch((error) => {
        console.log(error);
    })

然后我将这个数组传递到我的屏幕并将其置于我的状态 route。

我希望它在道路上绘制多段线，而不是在建筑物和其他东西上。

这是一张图片，向您展示它的样子（请注意，蓝线只是覆盖道路名称，与绘制多段线无关）：

Answer 1

请在计算路由剩余部分添加一个附加参数api： legAttributes=形状

然后其余 api 将 return 包含道路沿线点的形状对象。

https://route.api.here.com/routing/7.2/calculateroute.json?app_id={myappid}&app_code={myappcode}&waypoint0=geo!${from_lat},${from_long}&waypoint1=geo!${to_lat},${to_long}&mode=fastest;bicycle;traffic:disabled&legAttributes=shape

请参阅文档中的 legAttributes。 https://developer.here.com/documentation/routing/topics/resource-calculate-route.html

如何使用 HERE <Polyline /> 在 react-native-maps 中跟随道路 API

How to make <Polyline /> follow roads in react-native-maps with HERE API

react-native

here-api

polyline

react-native-maps