Flutter导航标记插件nav_marker的使用

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

Flutter导航标记插件nav_marker的使用

nav_marker

nav_marker 是一个Flutter包，允许你在 flutter_map 上添加导航标记。

预览

以下是 nav_marker 的一些预览图：

动画预览 预览1 预览2
动画预览 预览1 预览2

功能

  • 使用 NavigationOverlay 通过 MapOrNavMarkerLayer 定义动态标记。
  • 显示一个导航器，引导用户到达标记位置。
  • 自定义导航器的外观以匹配标记。

入门

在使用 nav_marker 包之前，请确保你已经在Flutter项目中安装并设置了 flutter_map。如果你还没有这样做，请参考 flutter_map 的官方文档进行安装说明。

使用方法

  1. 导入必要的包：

    import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';
import 'package:nav_marker/map_or_nav_marker.dart';

  2. 设置地图视图： 按照 flutter_map 文档中的说明设置地图视图，并指定初始的地图选项。

  3. 添加 MapOrNavMarkerLayer： 将 MapOrNavMarkerLayer 添加到 FlutterMap 的 children 属性中。注意：MapOrNavMarkerLayer 必须放在 TileLayer 之后。

    FlutterMap(
    options: MapOptions(
        center: LatLng(51.509364, -0.128928),
        zoom: 9.2,
    ),
    children: [
        TileLayer(
            urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
            userAgentPackageName: 'com.example.app',
        ),
        MapOrNavMarkerLayer(
            mapOrNavMarkers: [
                // 在这里添加你的标记
            ]
        ),
    ],
),

  4. 添加 MapOrNavMarker： 在 MapOrNavMarkerLayer 的 mapOrNavMarkers 属性中添加 MapOrNavMarker。确保 navMarkerEnabled 属性为 true，以便显示标记。

    MapOrNavMarkerLayer(
    mapOrNavMarkers: [
        MapOrNavMarker(
            navMarkerEnabled: true,
            builder: (_) => ClipOval(
                child: Image(
                    image: AssetImage('assets/images/man_portrait.jpg'),
                ),
            ),
            point: LatLng(52.519364, -0.148928),
        ),
        MapOrNavMarker(
            navMarkerEnabled: true,
            builder: (_) => ClipOval(
                child: Image(
                    image: AssetImage('assets/images/woman_portrait.jpg'),
                ),
            ),
            point: LatLng(49.239764, -2.218928),
        ),
        MapOrNavMarker(
            navMarkerEnabled: true,
            builder: (_) => Icon(
                Icons.location_on_sharp,
                color: Colors.blue,
            ),
            point: LatLng(50.509364, 1.658928),
        ),
    ],
),

  5. 自定义导航标记： 你可以通过 navMarkerSettings 属性自定义导航标记的外观，包括点击事件、箭头颜色、背景颜色等。

    MapOrNavMarker(
    navMarkerEnabled: true,
    navMarkerSettings: NavMarkerSettings(
        onTap: (targetPoint) => mapController.move(
            targetPoint,
            mapController.zoom,
        ),
        arrowColor: Colors.red,
        backgroundColor: Colors.white,
        surfaceColor: Colors.grey,
        size: 50.0,
        child: Icon(Icons.location_on_sharp, color: Colors.blue),
    ),
    builder: (_) => Icon(
        Icons.location_on_sharp,
        color: Colors.blue,
    ),
    point: LatLng(51.509364, -0.128928),
),

完整示例代码

以下是一个完整的示例代码，展示了如何在 flutter_map 上使用 nav_marker 插件：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'NavMarker Example',
      home: MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  final mapController = MapController();

  final initialPoint = const LatLng(51.509364, -0.128928);

  List<MapOrNavMarker> markers = [];

  final List<LatLng> points = const [
    LatLng(52.519364, -0.148928),
    LatLng(49.239764, -2.218928),
    LatLng(50.509364, 1.658928),
  ];

  final List<Widget> builders = const [
    ClipOval(
      child: Image(
        image: AssetImage('assets/images/man_portrait.jpg'),
      ),
    ),
    ClipOval(
      child: Image(
        image: AssetImage('assets/images/woman_portrait.jpg'),
      ),
    ),
    Icon(
      Icons.location_on_sharp,
      color: Colors.blue,
    ),
  ];

  [@override](/user/override)
  void initState() {
    initMarkers();
    super.initState();
  }

  void initMarkers() {
    for (int i = 0; i < points.length; i++) {
      markers.add(
        MapOrNavMarker(
          navMarkerEnabled: true,
          navMarkerSettings: NavMarkerSettings(
            onTap: (targetPoint) => mapController.move(
              targetPoint,
              mapController.zoom,
            ),
          ),
          builder: (_) => builders[i],
          point: points[i],
        ),
      );
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text('NavMarker Example'),
      ),
      body: FlutterMap(
        mapController: mapController,
        options: MapOptions(
          center: initialPoint,
          zoom: 9.2,
        ),
        children: [
          TileLayer(
            urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
            userAgentPackageName: 'com.example.app',
          ),
          MapOrNavMarkerLayer(
            mapOrNavMarkers: markers,
          ),
        ],
      ),
    );
  }
}

更多关于Flutter导航标记插件nav_marker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter导航标记插件nav_marker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，关于Flutter中的nav_marker插件的使用，以下是一个简单的代码案例来展示如何在Flutter应用中实现导航标记功能。请注意，nav_marker并非Flutter官方插件，所以具体的API和功能可能有所不同。这里假设nav_marker插件提供了一些基本的功能，比如设置和获取导航标记。

首先，确保你已经在pubspec.yaml文件中添加了nav_marker依赖：

dependencies:
  flutter:
    sdk: flutter
  nav_marker: ^x.y.z  # 替换为实际版本号

然后，运行flutter pub get来安装依赖。

接下来是一个简单的代码示例，展示如何使用nav_marker插件：

import 'package:flutter/material.dart';
import 'package:nav_marker/nav_marker.dart';  // 假设插件提供了这个import路径

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Nav Marker Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/second': (context) => SecondScreen(),
      },
      navigatorObservers: [
        NavMarkerObserver(),  // 添加NavMarkerObserver来监听导航事件
      ],
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/second');
            // 设置导航标记，假设插件提供了这样的API
            NavMarker.of(context).setMarker('goToSecondScreen');
          },
          child: Text('Go to Second Screen'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('You have reached the Second Screen'),
            ElevatedButton(
              onPressed: () {
                Navigator.pop(context);
                // 获取导航标记，假设插件提供了这样的API
                final marker = NavMarker.of(context).getMarker();
                print('Navigation Marker: $marker');  // 应该输出 'goToSecondScreen'
              },
              child: Text('Go Back'),
            ),
          ],
        ),
      ),
    );
  }
}

// 假设NavMarkerObserver和NavMarker的API如下（这需要根据实际插件文档调整）
class NavMarkerObserver extends RouteObserver<PageRoute<dynamic>> {
  // 自定义逻辑，比如监听路由变化
}

extension NavMarkerExtension on BuildContext {
  NavMarker getMarkerProvider() {
    return ModalRoute.of(this)?.settings.arguments as NavMarker? ?? NavMarker();
  }

  NavMarker getMarker() {
    return getMarkerProvider().getMarker();  // 假设有getMarker方法
  }

  void setMarker(String marker) {
    getMarkerProvider().setMarker(marker);  // 假设有setMarker方法
  }
}

class NavMarker {
  String? _marker;

  String? getMarker() {
    return _marker;
  }

  void setMarker(String marker) {
    _marker = marker;
  }
}

注意：

  1. 上述代码中的NavMarkerObserver、NavMarker和扩展方法NavMarkerExtension是假设性的，具体实现需要根据nav_marker插件的实际API进行调整。
  2. NavMarker.of(context)方法是一个假设性的方法，用于从上下文中获取NavMarker实例。实际使用时，需要根据插件提供的API进行调整。
  3. 如果nav_marker插件没有提供类似的功能，你可能需要实现自己的逻辑来跟踪导航状态。

确保查阅nav_marker插件的官方文档，以获取准确的API信息和使用方法。

回到顶部