Flutter地图导航插件navigation_map的使用

NavigationMap 是一个用于在交互式地图上进行实时导航、位置跟踪和路线可视化的 Flutter 插件。它基于 flutter_map 构建，并支持固定标记、当前速度和路线绘制等功能。

特性

• 显示当前位置并跟踪移动。
• 绘制位置之间的路线。
• 添加固定位置标记。
• 获取实时速度（单位：公里/小时）。
• 使用反向地理编码获取位置名称。

安装

在你的 pubspec.yaml 文件中添加 navigation_map：

dependencies:
  navigation_map: ^0.0.1
  latlong2: 0.9.1

根据目标平台配置相应的权限。

对于 Android

1. 在你的 gradle.properties 文件中添加以下内容：

   android.useAndroidX=true
   android.enableJetifier=true
   

2. 确保你在 android/app/build.gradle 文件中将 compileSdkVersion 设置为 34：

   android {
     compileSdkVersion 34
   
     ...
   }
   

3. 在 AndroidManifest.xml 中设置权限：

   <manifest xmlns:android="http://schemas.android.com/apk/res/android">
   
       <uses-permission android:name="android.permission.INTERNET" />
       <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
       <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />    
       <uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />
   
       <application
   

4. 如果出现 Kotlin 版本错误，更新到最新版本的 Kotlin：

   plugins {
       id "dev.flutter.flutter-plugin-loader" version "1.0.0"
       id "com.android.application" version "7.3.0" apply false
       id "org.jetbrains.kotlin.android" version "2.0.21" apply false
   }
   

对于 iOS

1. 在你的 Info.plist 文件中添加以下内容（位于 ios/Runner 目录下）：

   <key>NSLocationWhenInUseUsageDescription</key>
   <string>This app needs access to location when open.</string>
   

有关 Android 和 iOS 的更多配置信息，请访问 geolocator 包在 Pub.dev 上的页面。

使用文档

1. 加载地图并获取当前位置

   Widget build(BuildContext context) {
     final GlobalKey<NavigationMapState> navMapKey = GlobalKey();
   
     return SafeArea(
       child: Scaffold(
         body: NavigationMap(
           key: navMapKey,
         ),
       ),
     );
   }
   

2. 获取当前位置的经纬度坐标

   final location = navMapKey.currentState?.getCurrentLocation();
   if (location != null) {
     print(location);
   }
   

3. 添加固定位置

   final mapState = navMapKey.currentState;
   if (mapState != null) {
     // 示例固定位置
     mapState.addFixedLocation(
       LatLng(6.927079, 79.861244)); // 替换为你自己的 LatLng
   }
   

4. 定义一条路线

   navMapKey.currentState?.clearRoute(); 
   navMapKey.currentState?.fetchRoute(
     LatLng(37.7749, -122.4194), 
     LatLng(34.0522, -118.2437)
   );
   

5. 获取距离（单位：米）

   final mapState = navMapKey.currentState;
   if (mapState != null) {
     LatLng colombo = LatLng(6.9271, 79.8612);
     LatLng galle = LatLng(6.0328, 80.2168);
     double distance = mapState.calculateDistance(colombo, galle);
   
     print("Distance: $distance meters");
   }
   

6. 清除已设置的路线

   navMapKey.currentState?.clearRoute(); 
   

7. 获取当前速度（单位：公里/小时）

   print(navMapKey.currentState?.getCurrentSpeed());
   

8. 获取位置名称

   floatingActionButton: FloatingActionButton(
     onPressed: () async {
       final mapState = navMapKey.currentState;
       LatLng colombo = LatLng(6.9271, 79.8612);
       if (mapState != null) {
         String? locationName = await mapState.getLocationName(colombo);
         if (locationName != null) {
           print("Location Name: $locationName");
         } else {
           print("Could not retrieve location name.");
         }
       }
     },
   )
   

示例代码

以下是完整的示例代码，你可以将其复制到你的项目中以测试 navigation_map 插件的功能。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const Home(),
    );
  }
}

class Home extends StatefulWidget {
  const Home({super.key});

  [@override](/user/override)
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final GlobalKey<NavigationMapState> navMapKey = GlobalKey();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: NavigationMap(
          key: navMapKey,
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            final mapState = navMapKey.currentState;
            LatLng colombo = LatLng(6.9271, 79.8612);
            if (mapState != null) {
              String? locationName = mapState.getLocationName(colombo);
              if (locationName != null) {
                print("Location Name: $locationName");
              } else {
                print("Could not retrieve location name.");
              }
            }
          },
        ),
      ),
    );
  }
}