在 Tomtom Map API 中使用折线答案

【问题标题】：Using polyline in Tomtom Map API在 Tomtom Map API 中使用折线
【发布时间】：2022-12-15 19:02:01
【问题描述】：

我的代码有问题，我无法为最终标记创建路由。今天我的代码只是通过Tomtom API标记了最终地址，但我无法在点之间制作轨迹。

我不知道如何在 tomtom API 中实现这一点。

import "package:flutter/material.dart";
import "package:flutter_map/flutter_map.dart";
import 'package:geolocator/geolocator.dart';
import "package:latlong2/latlong.dart";
import "package:http/http.dart" as http;
import "dart:convert" as convert;
import 'package:location/location.dart';
import 'package:flutter_polyline_points/flutter_polyline_points.dart';
import 'package:syncfusion_flutter_maps/maps.dart';

class mapa extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return mapaState();
  }
}

class mapaState extends State<mapa> {
  final String apiKey = "5ffCTiHClrJBxXGqLadlrjmh3vFVxCVs";
  final List<Marker> markers = List.empty(growable: true);

  @override
  Widget build(BuildContext context) {
    final tomtomHQ = new LatLng(-23.7512754, -46.6824583);

    final initialMarker = new Marker(
      width: 50.0,
      height: 50.0,
      point: tomtomHQ,
      builder: (BuildContext context) =>
          const Icon(Icons.location_on, size: 60.0, color: Colors.red),
    );
    markers.add(initialMarker);

    getAddresses(value, lat, lon) async {
      final Map<String, String> queryParameters = {'key': '$apiKey'};
      queryParameters['lat'] = '$lat';
      queryParameters['lon'] = '$lon';
      var response = await http.get(Uri.https(
          'api.tomtom.com', '/search/2/search/$value.json', queryParameters));
      var jsonData = convert.jsonDecode(response.body);
      print('$jsonData');
      var results = jsonData['results'];
      for (var element in results) {
        var position = element['position'];
        var marker = new Marker(
          point: new LatLng(position['lat'], position['lon']),
          width: 50.0,
          height: 50.0,
          builder: (BuildContext context) =>
              const Icon(Icons.location_on, size: 40.0, color: Colors.blue),
        );
        markers.add(marker);
      }
    }

    return MaterialApp(
      title: "TomTom Map",
      home: Scaffold(
        resizeToAvoidBottomInset: false,
        body: Center(
            child: Stack(
          children: <Widget>[
            FlutterMap(
              options: new MapOptions(center: tomtomHQ, zoom: 13.0),
              layers: [
                new TileLayerOptions(
                  urlTemplate: "https://api.tomtom.com/map/1/tile/basic/main/"
                      "{z}/{x}/{y}.png?key={apiKey}",
                  additionalOptions: {"apiKey": apiKey},
                ),
                new MarkerLayerOptions(
                  markers: markers,
                ),
              ],
            ),
            Container(
                padding: EdgeInsets.only(top: 50),
                alignment: Alignment.topRight,
                child: TextField(
                  onSubmitted: (value) {
                    print('$value');
                    getAddresses(value, tomtomHQ.latitude, tomtomHQ.longitude);
                  },
                ))
          ],
        )),
      ),
    );
  }
}

【问题讨论】：

标签： android flutter dart tomtom tomtom-android-sdk

【解决方案1】：

您正在使用 flutter_map，因此最好使用 PolylineLayer() 创建一个包含从 TomTom Routing API 检索到的点的折线的图层。需要转换的点列表

[{
  "latitude": 52.50931,
  "longitude": 13.42937
},]

至

[LatLng(52.50931, 13.42937),]

【讨论】：