在 Tomtom Map API 中使用折线

Question

I have a problem in my code where I can't create the route for the final markup. Today my code only marks the final address through the Tomtom API, but I am not able to make the trajectory between the points.

I have no idea how to achieve this in the 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);
                  },
                ))
          ],
        )),
      ),
    );
  }
}

Answer 1

You are using flutter_map, so the best would be to use PolylineLayer() to create a layer with a polyline with points retrieved from TomTom Routing API . List of points needs to be converted from

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

to

[LatLng(52.50931, 13.42937),]