Google Maps computeRoutes：Flutter/Dart中Polyline解码转义异常问题

我正在尝试从Google Maps API的computeRoutes方法提取路线。每次都能获取到正确响应，且可通过Polyline解码器验证，但使用json.encode再json.decode(response.body)时，encodedPolyline因转义字符序列（如双反斜杠\）被修改而出现异常。直接打印原始response.body显示正常，请问这是什么原因？是否需要改用其他方法？

server.js #

app.post('/api/computeRoutes', async (req, res) => {
      const { origin, destination, travelMode } = req.body;
      const apiKey = process.env.GOOGLE_MAPS_API_KEY;
    
      const [originLat, originLng] = origin.split(',').map(Number);
      const [destinationLat, destinationLng] = destination.split(',').map(Number);
    
      const url = `https://routes.googleapis.com/directions/v2:computeRoutes?key=${apiKey}`;
    
      const data = {
        origin: {
          location: {
            latLng: {
              latitude: originLat, 
              longitude: originLng
            } 
          }
        },
        destination: {
          location: { 
            latLng: { 
              latitude: destinationLat, 
              longitude: destinationLng 
            } 
          }
        },
        travelMode: "DRIVE"
        // travelMode: travelMode.toUpperCase() || 'DRIVING'
      };
    
      const headers = {
        'Content-Type': 'application/json',
        'X-Goog-FieldMask': 'routes.duration,routes.distanceMeters,routes.polyline.encodedPolyline'
      };
      
      try {
        const response = await axios.post(url, data, { headers });
        console.log(`Server.js Response Data: ${JSON.stringify(response.data)}`);
        res.json(response.data);
      } catch (error) {
        console.error('Error in computeRoutes:', error);
        res.status(500).send('Error occurred while fetching routes');
      }
    });

map_service.dart #

Future<dynamic> getDirections(String origin, String destination, {String travelMode = 'DRIVING'}) async {
    final url = '$_baseUrl/api/computeRoutes';

    final response = await http.post(
      Uri.parse(url),
      headers: {"Content-Type": "application/json"},
      body: json.encode({
        'origin': origin,
        'destination': destination,
        'travelMode': travelMode,
      }),
    );

    if (response.statusCode == 200) {
      String responseBody = response.body;
      return json.decode(response.body); // Adjust according to your server's response format
    } else {
      throw Exception('Failed to get directions: ${response.body}');
    }
  }

核心原因 #

问题出在重复的JSON序列化/反序列化操作：

• 服务端中，axios.post返回的response.data已经是解析完成的JavaScript对象，其中encodedPolyline是原始的无转义字符串。调用res.json(response.data)时，Express会自动将该对象序列化为标准JSON字符串（对特殊字符做单次转义，比如\变为\\）。
• 若前端对获取到的JSON字符串（response.body）先执行json.encode再json.decode，会导致转义字符被二次处理：原本的\\会被再次转义为\\\\，反序列化后就变成了\\，而非原始的\，最终导致Polyline解码失败。

解决方法 #

1. 移除多余的json.encode操作：
   前端只需直接对response.body执行一次json.decode即可，无需先编码。你的Dart代码中已经是这么做的，确保后续处理中不要额外添加json.encode步骤。

2. 确认服务端输出正确：
   服务端使用res.json()是正确的，它会自动处理序列化和响应头，不要改用res.send(JSON.stringify(response.data))，否则会导致双重序列化，同样引发转义问题。

3. 验证Polyline字符串：
   解码前可以打印json.decode后得到的encodedPolyline值，确认其与Google Maps API返回的原始Polyline一致（无多余反斜杠），再传入解码器即可正常工作。

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