如何在react-native-maps中利用MapQuest坐标精准绘制道路路线？

我之前也碰到过类似的情况，折线飘在道路外面确实头疼，咱们从这几个方向调整就能搞定：

1. 开启Route Shape API的高精度模式 #

你现在调用的routeshape接口默认返回的是简化后的路线点（为了减少数据量），这就是折线不精准的核心原因。只需要在请求里加上&fullShape=true参数，就能获取完整的、贴合道路的高精度坐标点。

修改后的请求URL应该是这样：

http://www.mapquestapi.com/directions/v2/routeshape?key=[API_KEY]&sessionId=[ABOVE_REQUEST_SESSION_ID]&fullShape=true

（原来的mapWidth、mapHeight、mapScale这些参数可以去掉，因为fullShape=true会忽略这些简化参数，直接返回所有路线点）

2. 确保坐标格式转换正确 #

MapQuest返回的route.shape.shapePoints是一个扁平数组，格式是[纬度1, 经度1, 纬度2, 经度2,...]，你需要把它转换成MapView.Polyline要求的对象数组格式。如果转换逻辑有问题，也会导致折线错位。

给你一个正确的转换示例：

// 假设从API响应中拿到的shapePoints数据
const shapePoints = response.route.shape.shapePoints;
const formattedCoords = [];

for (let i = 0; i < shapePoints.length; i += 2) {
  formattedCoords.push({
    latitude: shapePoints[i],
    longitude: shapePoints[i + 1]
  });
}

this.setState({ coords: formattedCoords });

3. 验证路线数据的正确性 #

你可以先在MapQuest的官方开发者工具里测试你的请求，确认返回的shapePoints数组包含足够多的点（开启fullShape后点数会明显增多）。如果返回的点还是很少，那可能是第一个optimizedroute请求的参数有问题，比如可以检查是否指定了正确的路线偏好（比如routeType=fastest，默认值一般没问题，但可以手动确认）。

4. 调整MapView的显示参数 #

确保你的MapView的initialRegion能完整覆盖整个路线范围，不然地图缩放比例不对的话，也会让折线看起来不贴合道路。你可以根据路线的起点和终点动态计算latitudeDelta和longitudeDelta，或者直接用MapView的fitToCoordinates方法让地图自动适配路线：

// 给MapView添加ref
<MapView 
  ref={ref => this.mapRef = ref} 
  style={{ flex: 1 }} 
  showsUserLocation 
>
  <MapView.Polyline strokeWidth={2} strokeColor="red" coordinates={this.state.coords}></MapView.Polyline>
</MapView>

// 在设置完coords状态后调用适配方法
this.mapRef.fitToCoordinates(this.state.coords, {
  edgePadding: { top: 50, right: 50, bottom: 50, left: 50 },
  animated: true
});

按照这几步调整后，你的折线应该就能精准贴合道路了！

内容的提问来源于stack exchange，提问作者0x01Brain