如何在 Flutter App 上的 OSM 上绘制路线答案

【问题标题】：How to draw a route on OSM on flutter App如何在 Flutter App 上的 OSM 上绘制路线
【发布时间】：2020-10-30 01:49:10
【问题描述】：

我创建了一个组件来在视图上显示 OpenStreetMap (OSM)。

问题：如何在地图上绘制静态路线。

它应该类似于我从 GoogleMap 捕获的以下地图。

到目前为止我做了什么。我创建了一个视图来显示地图。

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong/latlong.dart';

class TrailMapPage extends StatefulWidget {
  @override
  _TrailMapPageState createState() => _TrailMapPageState();
}

class _TrailMapPageState extends State<TrailMapPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("TrailMapPage")),
      body: _map(context),
    );
  }

  Widget _map(BuildContext context) {
    return new FlutterMap(
      options: MapOptions(
        center: LatLng(22.3193, 114.1694),
        zoom: 13.0,
      ),
      layers: [
        new TileLayerOptions(
            urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            subdomains: ['a', 'b', 'c']),
        new MarkerLayerOptions(
          markers: [
            new Marker(
              width: 80.0,
              height: 80.0,
              point: new LatLng(51.5, -0.09),
              builder: (ctx) => new Container(
                child: new FlutterLogo(),
              ),
            ),
          ],
        ),
      ],
    );
  }
}

【问题讨论】：

好问题，你有什么进展了吗？我的想法是以字符串的形式获取 gpx 文件，然后将点从字符串添加到地图中。几天来一直在寻找解决方案，但一无所获。

标签： flutter routes openstreetmap

【解决方案1】：

您可以查看下面的 Flutter Maps 小部件，它具有折线功能，允许在地图顶部添加路线。

https://pub.dev/packages/syncfusion_flutter_maps

【讨论】：