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

作者：坚果前端

2021 年 11 月 13 日
本文字数：2113 字
阅读完需：约 7 分钟

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

大家好，我是坚果，我的公众号“坚果前端”，

本来今天带来的是 flutter 基础部分，但是有人问道说是 Flutter 怎么实现地图导航功能，那么今天就和大家交流一下

引子

一个 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 的使用。

发布于: 3 小时前阅读数: 6

原文链接:【http://xie.infoq.cn/article/4a39e655f3c3dcb0714281804】。文章转载请联系作者。

坚果前端

关注

还未添加个人签名 2020.10.25 加入

公众号：“坚果前端”，51CTO博客首席体验官，专注于大前端技术的分享，包括Flutter,小程序,安卓，VUE，JavaScript。

发布

暂无评论

创作场景

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

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

引子

第 1 类：App 集成导航功能

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

用法

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

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

封装

使用

效果展示

坚果前端

评论