Flutter地图路线选择插件flutter_map_pick_route_sherifammar的使用

发布于 1周前 作者 yibo5220 来自 Flutter

Flutter地图路线选择插件flutter_map_pick_route_sherifammar的使用

flutter_map_pick_route_sherifammar 是一个基于Open Street Map的地图路线选择插件,它允许用户在两个不同地点之间进行位置搜索、选择位置、生成路线以及测量两点之间的距离。该插件完全免费且易于使用。

特性

  • 通过地点搜索位置
  • 简单易用
  • 在两个点之间生成路线
  • 测量两点之间的距离(米)
  • 更改位置

示例

示例图片 示例图片

开始使用

安装

首先,在你的pubspec.yaml文件中添加依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_map_pick_route_sherifammar: ^最新版本号

然后运行 flutter pub get 来安装插件。

导入包

在你的Dart文件中导入插件:

import 'package:flutter_map_pick_route_sherifammar/flutter_map_pick_route_sherifammar.dart';

使用方法

你需要从OpenRouteService网站获取一个API密钥,并将其用于初始化插件。

示例代码

以下是一个完整的示例demo,展示了如何使用flutter_map_pick_route_sherifammar插件:

import 'package:flutter/material.dart';
import 'package:flutter_map_pick_route_sherifammar/flutter_map_pick_route_sherifammar.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: FlutterMapSearchAndPinkRoute(
        orsApiKey: "your_key_from_openrouteservice", // 替换为你的OpenRouteService API密钥
        latidedCurrent: 25.0, // 当前纬度
        longtideCurrent: 91.0, // 当前经度
      ),
    );
  }
}

更多关于Flutter地图路线选择插件flutter_map_pick_route_sherifammar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter地图路线选择插件flutter_map_pick_route_sherifammar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中集成并使用flutter_map_pick_route_sherifammar插件的一个代码示例。这个插件允许用户在地图上选择路线。

首先,确保你已经在pubspec.yaml文件中添加了flutter_map_pick_route_sherifammar依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_map: ^0.14.0  # 确保版本与flutter_map_pick_route_sherifammar兼容
  flutter_map_pick_route_sherifammar: ^最新版本号  # 请替换为实际最新版本号

然后,运行flutter pub get来获取依赖。

接下来,在你的Flutter应用中,你可以按照以下步骤使用flutter_map_pick_route_sherifammar插件:

  1. 导入必要的包
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';
import 'package:flutter_map_pick_route_sherifammar/flutter_map_pick_route_sherifammar.dart';
  1. 创建地图和路线选择功能
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Map Pick Route Example'),
        ),
        body: MapPage(),
      ),
    );
  }
}

class MapPage extends StatefulWidget {
  @override
  _MapPageState createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  MapController? _mapController;
  List<LatLng> _routePoints = [];

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        FlutterMap(
          mapController: _mapController,
          options: MapOptions(
            center: LatLng(0, 0),
            zoom: 2.0,
          ),
          layers: [
            TileLayerOptions(
              urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
              subdomains: ['a', 'b', 'c'],
            ).build(),
            if (_routePoints.isNotEmpty)
              PolylineLayerOptions(
                polylines: [
                  Polyline(
                    points: _routePoints,
                    strokeWidth: 4.0,
                    color: Colors.blue,
                  ),
                ],
              ).build(),
          ],
        ),
        Positioned(
          bottom: 16.0,
          right: 16.0,
          child: ElevatedButton(
            onPressed: () async {
              final result = await Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => PickRoutePage(
                    mapController: _mapController!,
                  ),
                ),
              );
              if (result != null) {
                setState(() {
                  _routePoints = result;
                });
              }
            },
            child: Text('Pick Route'),
          ),
        ),
      ],
    );
  }

  @override
  void initState() {
    super.initState();
    _mapController = MapController();
  }
}

class PickRoutePage extends StatefulWidget {
  final MapController mapController;

  const PickRoutePage({required this.mapController});

  @override
  _PickRoutePageState createState() => _PickRoutePageState();
}

class _PickRoutePageState extends State<PickRoutePage> {
  late PickRouteController _pickRouteController;

  @override
  void initState() {
    super.initState();
    _pickRouteController = PickRouteController(
      mapController: widget.mapController,
      onRoutePicked: (List<LatLng> points) {
        Navigator.pop(context, points);
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Pick Route'),
      ),
      body: PickRouteMap(
        controller: _pickRouteController,
      ),
    );
  }
}

在这个示例中,我们有一个主页面MapPage,它包含一个FlutterMap组件和一个按钮。点击按钮时,会导航到PickRoutePage,用户可以在这里选择路线。选择完成后,路线点会被返回并在主地图上显示。

请注意,这个示例假设flutter_map_pick_route_sherifammar插件提供了一个PickRouteControllerPickRouteMap组件,以及一个用于处理路线选择的机制。由于这个插件的具体API可能会有所不同,你可能需要参考插件的官方文档来调整代码。

此外,由于插件可能会更新,请确保查看最新的文档和示例代码,以获取最准确的信息。

回到顶部