Flutter怎么实现地图导航功能?

简介: 引子一个app 咋能没有导航功能呢,我们在应用开发中经常需要用到地图定位或导航的功能,而集成该功能的方式总的来说分为两类:

引子

一个app 咋能没有导航功能呢,我们在应用开发中经常需要用到地图定位或导航的功能,而集成该功能的方式总的来说分为两类:

第 1 类:App 集成导航功能

这种方式的优点是可以进行深度地图定制,比如出行或外卖软件会有自己的定制,上面会有司机或骑手的小图标,但是集成开发成本也是比较高的。所以很大程度上不太使用

第 2 类:跳转第三方地图软件

这种方式是比较简单的一种,把目的地传给第三方导航软件,比如高德地图,它会为你提供导航功能。这种方式开发成本低,可快速提供导航功能。

那么对于Flutter来说如何实现呢,我提供了一种解决方案,大家可以参考一下,

第一步引入插件

flutter_svg: ^0.19.1  ##只在使用图标的使用导入,不用可以不导入
  map_launcher: ^1.1.3+1
复制代码

对于 iOS,在 Info.plist 文件中添加 url 方案

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>comgooglemaps</string>
    <string>baidumap</string>
    <string>iosamap</string>
    <string>waze</string>
    <string>yandexmaps</string>
    <string>yandexnavi</string>
    <string>citymapper</string>
    <string>mapswithme</string>
    <string>osmandmaps</string>
    <string>dgis</string>
    <string>qqmap</string>
    <string>here-location</string>
</array>
复制代码

用法

获取已安装地图的列表并首先启动

import 'package:map_launcher/map_launcher.dart';
final availableMaps = await MapLauncher.installedMaps;
print(availableMaps); 
await availableMaps.first.showMarker(
  coords: Coords(28, 120),
  title: "坚果前端",
);
复制代码

检查地图是否安装并启动它

import 'package:map_launcher/map_launcher.dart';
if (await MapLauncher.isMapAvailable(MapType.google)) {
  await MapLauncher.showMarker(
    mapType: MapType.google,
    coords: coords,
    title: title,
    description: description,
  );
}
复制代码

封装

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:map_launcher/map_launcher.dart';
class MapsSheet {
  static show({
    @required BuildContext context,
    @required Function(AvailableMap map) onMapTap,
  }) async {
    final availableMaps = await MapLauncher.installedMaps;
    for (var map in availableMaps) {
      map.mapName = getLocalName(amap: map);
    }
    showModalBottomSheet(
      context: context,
      backgroundColor: Colors.transparent,
      builder: (BuildContext context) {
        return SafeArea(
          child: Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(20)),
            ),
            child: Column(
              children: <Widget>[
                Expanded(
                  child: SingleChildScrollView(
                    child: Container(
                      child: Wrap(
                        children: <Widget>[
                          for (var map in availableMaps)
                            ListTile(
                              onTap: () => onMapTap(map),
                              title: Text(map.mapName),
                              leading: SvgPicture.asset(
                                map.icon,
                                height: 50.0,
                                width: 50.0,
                              ),
                            ),
                        ],
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}
String getLocalName({AvailableMap amap}) {
  switch (amap.mapType) {
    case MapType.amap:
      return '高德地图';
    case MapType.baidu:
      return '百度地图';
    case MapType.tencent:
      return '腾讯地图';
    case MapType.google:
      return '谷歌地图';
    case MapType.apple:
      return '苹果地图';
    default:
      return amap.mapName;
  }
}
复制代码

使用

MapsSheet.show(
                context: context,
                onMapTap: (map) {
                  map.showMarker(
                    coords: Coords(_local.lat, _local.lng),
                    title: _local.addr,
                    zoom: 20,
                  );
                },
              );
复制代码

效果展示

网络异常,图片无法展示
|

以上就是今天的分享内容,也欢迎与大家一起学习,交流Flutter的使用。



相关文章
|
7月前
|
iOS开发 UED
Flutter 动态修改应用图标功能指南
探索Flutter中动态应用图标的实现方法,了解如何为用户提供独特体验,促进用户升级和应用内购买。
207 0
Flutter 动态修改应用图标功能指南
|
7月前
|
移动开发 JavaScript 前端开发
【Uniapp 专栏】Uniapp 与 Flutter 的功能特点对比
【5月更文挑战第15天】Uniapp 和 Flutter 是跨平台开发的热门框架。Uniapp 以其强大的跨平台兼容性和基于 Vue.js 的易学性著称,适合快速开发适用于 iOS、Android 和 H5 的应用。其丰富的组件生态简化了功能集成。然而,在复杂场景下,性能可能不及原生。Flutter 则以其全新渲染引擎实现流畅界面和高度自定义,性能接近原生,但学习成本较高,需处理特定平台适配。适用于高要求的项目。两者各有优势,选择应考虑项目需求、技术储备和开发周期。
836 1
【Uniapp 专栏】Uniapp 与 Flutter 的功能特点对比
|
2月前
|
开发者
flutter:功能性组件 (八)
本文介绍了Flutter中常用的UI组件和功能,包括进度指示器(线性和圆形)、下拉刷新、选项按钮(单选按钮、复选框、开关)、手势识别(GestureDetector、Ink和InkWell)以及提示和Offstage组件的使用方法和示例代码。这些组件和功能可以帮助开发者快速构建交互丰富的应用程序界面。
|
5月前
flutter 导航组件 AppBar (含顶部选项卡TabBar,抽屉菜单 drawer ,自定义导航图标)
flutter 导航组件 AppBar (含顶部选项卡TabBar,抽屉菜单 drawer ,自定义导航图标)
87 1
|
6月前
|
安全 定位技术 API
探讨如何在Flutter中集成支付、地图等第三方服务,以及集成过程中需要注意的问题和最佳实践
【6月更文挑战第11天】本文介绍了在Flutter中集成第三方服务,如支付和地图,以增强应用功能和用户体验。开发者可通过官方或社区插件集成服务,注意服务选择、API调用、错误处理和用户体验。支付集成涉及选择服务、获取API密钥、引入插件、调用API及处理结果。地图集成则包括选择地图服务、获取API密钥、初始化地图组件和添加交互功能。集成时要选择稳定插件、仔细阅读文档,处理错误,优化性能并遵循安全规范。随着Flutter生态发展,更多优质服务将可供选择。
112 2
|
6月前
|
Dart 监控 开发者
详细介绍Flutter Profiler的功能、使用方法以及如何利用它来提升应用的性能
【6月更文挑战第11天】Flutter Profiler是用于优化Flutter应用的关键工具,提供CPU、GPU、内存和网络分析。它帮助开发者监控运行时性能,识别瓶颈,如CPU过度使用、渲染问题、内存泄漏和网络效率低。通过选择分析类型、开始分析、查看结果,开发者可进行针对性优化。最佳实践包括定期分析、结合实际场景、关注关键指标及结合其他工具。有效利用Profiler能提升应用性能和用户体验。
170 2
|
6月前
|
开发框架 开发者 UED
Flutter作为一款跨平台的移动应用开发框架,自然也提供了丰富的工具和功能来支持可访问性和无障碍设计
【6月更文挑战第11天】Flutter是一款注重可访问性设计的跨平台移动应用开发框架,提供语义化组件、文本缩放、对比度调整、动态内容更新通知和键盘导航等功能,支持无障碍体验。开发者应结合简化操作、清晰反馈、多输入方式支持及测试优化等原则,以创建包容性更强的应用,满足不同用户需求,体现社会责任。
65 1
|
6月前
|
开发框架 Dart JavaScript
深入探讨Flutter中的Web支持功能,以及如何利用Flutter构建跨平台Web应用的最佳实践
【6月更文挑战第11天】Flutter,Google的开源跨平台框架,已延伸至Web支持,让开发者能用同一代码库构建移动和Web应用。Flutter Web基于Dart转JavaScript,利用WebAssembly和JavaScript在Web上运行。构建Web应用最佳实践包括选择合适项目、优化性能、进行兼容性测试和利用Flutter的声明式UI、热重载等优势。尽管性能挑战存在,Flutter Web为跨平台开发提供了更多机会和潜力。
96 1
|
5月前
|
缓存 容器
Flutter实现仿微信群头像功能
Flutter实现仿微信群头像功能
70 0
|
7月前
|
前端开发 定位技术 API
【Flutter前端技术开发专栏】Flutter中的第三方服务集成(如支付、地图等)
【4月更文挑战第30天】本文介绍了在Flutter中集成第三方服务,如支付和地图,以增强应用功能和用户体验。开发者可通过官方或社区插件集成服务,关注服务选择、API调用、错误处理和用户体验。支付集成涉及选择服务、获取API密钥、引入插件、调用API及处理结果。地图集成则需选择地图服务、获取API密钥、初始化地图并添加交互功能。集成时注意选择稳定插件、阅读文档、处理异常、优化性能和遵循安全规范。随着Flutter生态发展,更多第三方服务将可供选择。
93 0
【Flutter前端技术开发专栏】Flutter中的第三方服务集成(如支付、地图等)