如何在TomTom Map API中绘制路径折线？Flutter开发求助

要实现两点间的轨迹绘制，你需要调用TomTom的Routing API获取路径坐标点，再通过flutter_map的轨迹图层渲染出来。以下是修改后的完整代码：

import "package:flutter/material.dart";
import "package:flutter_map/flutter_map.dart";
import "package:latlong2/latlong.dart";
import "package:http/http.dart" as http;
import "dart:convert" as convert;

class Mapa extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MapaState();
  }
}

class MapaState extends State<Mapa> {
  final String apiKey = "你的API密钥";
  final List<Marker> markers = List.empty(growable: true);
  List<LatLng> polylinePoints = [];
  late LatLng initialPosition;

  @override
  void initState() {
    super.initState();
    // 初始化起点位置
    initialPosition = const LatLng(-23.7512754, -46.6824583);
    // 添加起点标记
    markers.add(Marker(
      width: 50.0,
      height: 50.0,
      point: initialPosition,
      builder: (BuildContext context) =>
          const Icon(Icons.location_on, size: 60.0, color: Colors.red),
    ));
  }

  // 获取路径轨迹
  Future<void> fetchRoute(LatLng start, LatLng end) async {
    final url = Uri.https(
      'api.tomtom.com',
      '/routing/1/calculateRoute/${start.latitude},${start.longitude}:${end.latitude},${end.longitude}/json',
      {
        'key': apiKey,
        'routeType': 'fastest',
        'traffic': 'false',
      },
    );

    final response = await http.get(url);
    if (response.statusCode == 200) {
      final jsonData = convert.jsonDecode(response.body);
      final routes = jsonData['routes'];
      if (routes.isNotEmpty) {
        final points = routes[0]['legs'][0]['points'];
        setState(() {
          polylinePoints = points.map<LatLng>((point) {
            return LatLng(point['latitude'], point['longitude']);
          }).toList();
        });
      }
    }
  }

  // 搜索地址并添加标记、生成路径
  void getAddresses(String value) async {
    final Map<String, String> queryParameters = {
      'key': apiKey,
      'lat': '${initialPosition.latitude}',
      'lon': '${initialPosition.longitude}',
    };

    final response = await http.get(Uri.https(
        'api.tomtom.com', '/search/2/search/$value.json', queryParameters));
    if (response.statusCode == 200) {
      final jsonData = convert.jsonDecode(response.body);
      final results = jsonData['results'];
      if (results.isNotEmpty) {
        setState(() {
          // 清空之前的终点标记和路径
          markers.removeWhere((marker) => marker.point != initialPosition);
          polylinePoints.clear();
        });

        for (var element in results) {
          final position = element['position'];
          final endPosition = LatLng(position['lat'], position['lon']);
          // 添加终点标记
          setState(() {
            markers.add(Marker(
              point: endPosition,
              width: 50.0,
              height: 50.0,
              builder: (BuildContext context) =>
                  const Icon(Icons.location_on, size: 40.0, color: Colors.blue),
            ));
          });
          // 生成路径
          await fetchRoute(initialPosition, endPosition);
        }
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "TomTom Map",
      home: Scaffold(
        resizeToAvoidBottomInset: false,
        body: Stack(
          children: <Widget>[
            FlutterMap(
              options: MapOptions(center: initialPosition, zoom: 13.0),
              layers: [
                TileLayerOptions(
                  urlTemplate: "https://api.tomtom.com/map/1/tile/basic/main/"
                      "{z}/{x}/{y}.png?key={apiKey}",
                  additionalOptions: {"apiKey": apiKey},
                ),
                MarkerLayerOptions(
                  markers: markers,
                ),
                // 添加轨迹图层
                PolylineLayerOptions(
                  polylines: [
                    Polyline(
                      points: polylinePoints,
                      strokeWidth: 4.0,
                      color: Colors.blueAccent,
                    ),
                  ],
                ),
              ],
            ),
            Container(
              padding: const EdgeInsets.only(top: 50, left: 20, right: 20),
              alignment: Alignment.topRight,
              child: TextField(
                decoration: const InputDecoration(
                  hintText: "输入地址搜索",
                  filled: true,
                  fillColor: Colors.white,
                ),
                onSubmitted: getAddresses,
              ),
            )
          ],
        ),
      ),
    );
  }
}

关键修改说明 #

• 路径获取：新增fetchRoute函数调用TomTom Routing API，传入起点和终点坐标，解析返回的路径点集合。
• 状态管理：使用setState更新路径点列表，触发地图重绘轨迹。
• 标记优化：将初始标记移到initState中，避免重复添加；搜索新地址时清空旧的终点标记和路径。
• 轨迹渲染：在FlutterMap的图层中添加PolylineLayerOptions，用获取到的路径点绘制蓝色轨迹线。

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