Flutter 跳转地图软件调起导航:百度、高德、腾讯、苹果

一、说明

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

第 1 类:App 集成导航功能

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

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

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

由于 Flutter 技术出来不久,普及率算不上很高,目前很多导航定位还未对其提供专门支持,如果想集成导航功能的话,开发成本非常高,所以我们会考虑用跳转三方地图软件的方式实现导航功能。

二、实现步骤

第 1 步:添加插件

在 pubspec.yaml 文件中添加依赖插件:

url_launcher: ^5.4.2

第 2 步:iOS 配置 info.plist

<key>LSApplicationQueriesSchemes</key>
<array>
	<string>iosamap</string>
	<string>qqmap</string>
	<string>baidumap</string>
</array>

第 3 步:跳转导航

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
import 'alert_msg_util.dart';

class MapUtil {

  /// 高德地图
  static Future<bool> gotoAMap(longitude, latitude) async {
    var url = '${Platform.isAndroid ? 'android' : 'ios'}amap://navi?sourceApplication=amap&lat=$latitude&lon=$longitude&dev=0&style=2';

    bool canLaunchUrl = await canLaunch(url);

    if (!canLaunchUrl) {
      ToastUtil.show('未检测到高德地图~');
      return false;
    }

    await launch(url);

    return true;
  }

  /// 腾讯地图
  static Future<bool> gotoTencentMap(longitude, latitude) async {
    var url = 'qqmap://map/routeplan?type=drive&fromcoord=CurrentLocation&tocoord=$latitude,$longitude&referer=IXHBZ-QIZE4-ZQ6UP-DJYEO-HC2K2-EZBXJ';
    bool canLaunchUrl = await canLaunch(url);

    if (!canLaunchUrl) {
      ToastUtil.show('未检测到腾讯地图~');
      return false;
    }

    await launch(url);

    return canLaunchUrl;
  }

  /// 百度地图
  static Future<bool> gotoBaiduMap(longitude, latitude) async {
    var url = 'baidumap://map/direction?destination=$latitude,$longitude&coord_type=bd09ll&mode=driving';

    bool canLaunchUrl = await canLaunch(url);

    if (!canLaunchUrl) {
      ToastUtil.show('未检测到百度地图~');
      return false;
    }

    await launch(url);

    return canLaunchUrl;
  }

  /// 苹果地图
  static Future<bool> _gotoAppleMap(longitude, latitude) async {
    var url = 'http://maps.apple.com/?&daddr=$latitude,$longitude';

    bool canLaunchUrl = await canLaunch(url);

    if (!canLaunchUrl) {
      ToastUtil.show('打开失败~');
      return false;
    }

    await launch(url);
  }
}

以上是我封装的一个工具类,基本上可以拿来直接用,其中 toast 是我自己封装的,你们可以去掉这部分代码,然后用你们自己的方式通知用户打开失败。

三、注意

  1. 添加依赖库后不要忘记点击:Packages get。
  2. 要停止应用后重新运行安装到手机,添加三方库后只用 hot reload 是无法生效的。

四、参考

  1. 高德地图官方文档
  2. 腾讯地图官方文档
  3. 百度地图官方文档
  4. 苹果地图官方文档

 

  • 9
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 20
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 20
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值