Flutter - APP跳转高德、百度、腾讯、谷歌地图

demo 地址: https://github.com/iotjin/jh_flutter_demo
代码不定时更新，请前往github查看最新代码

这里介绍的是不需要自己开发地图，直接通过给定的经纬度，跳转到三方地图APP调用导航的方式
一种是写的工具类，一种是通过调用三方库map_launcher实现的

官方文档：

• 跳转高德导航 - 路径规划
  高德地图官方文档 - Android
  高德地图官方文档 - iOS

• 跳转高德导航
  高德地图官方文档

• 跳转百度导航 - 路径规划
  百度地图官方文档

• 跳转腾讯导航
  腾讯地图官方文档

参考文章：

Flutter 跳转地图软件调起导航：百度、高德、腾讯、苹果
Flutter 实战调起三方地图导航（高德、百度、腾讯、苹果）

插件：
map_launcher
flutter_map
maps_launcher

实现

在 pubspec.yaml 文件中添加依赖插件：文章来源地址https://www.toymoban.com/news/detail-808571.html

  # url打开工具 https://pub.flutter-io.cn/packages/url_launcher
  url_launcher: ^6.1.14
  # 打开地图工具 https://pub.flutter-io.cn/packages/map_launcher
  map_launcher: ^2.5.0+1

示例demo

///  map_jump_test_page.dart
///
///  Created by iotjin on 2023/10/16.
///  description: 跳转三方地图APP

import 'package:flutter/material.dart';
import 'package:map_launcher/map_launcher.dart';
import '/jh_common/utils/jh_map_utils.dart';
import '/jh_common/widgets/jh_text_list.dart';

// ignore_for_file: avoid_print

final List titleData = [
  '高德(JhMapUtils)',
  '高德2(JhMapUtils)',
  '百度(JhMapUtils)',
  '腾讯(JhMapUtils)',
  '三方库跳转高德(map_launcher)',
  '三方库弹出地图列表(map_launcher)',
];

class MapJumpTestPage extends StatefulWidget {
  const MapJumpTestPage({Key? key}) : super(key: key);

  @override
  State<MapJumpTestPage> createState() => _MapJumpTestPageState();
}

class _MapJumpTestPageState extends State<MapJumpTestPage> {
  var latitude = 39.922869448132474;
  var longitude = 116.40748500823975;

  @override
  Widget build(BuildContext context) {
    return JhTextList(
      title: '跳转三方地图导航',
      dataArr: titleData,
      callBack: (index, str) {
        if (str == '高德(JhMapUtils)') {
          JhMapUtils.openAMapNavi(dLatitude: latitude, dLongitude: longitude);
        }
        if (str == '高德2(JhMapUtils)') {
          JhMapUtils.openAMapNavi2(latitude: latitude, longitude: longitude);
        }
        if (str == '百度(JhMapUtils)') {
          JhMapUtils.openBaiduMapNavi(dLatitude: latitude, dLongitude: longitude);
        }
        if (str == '腾讯(JhMapUtils)') {
          JhMapUtils.openTencentMapNavi(dLatitude: latitude, dLongitude: longitude);
        }
        if (str == '三方库跳转高德(map_launcher)') {
          _gotoMap();
        }
        if (str == '三方库弹出地图列表(map_launcher)') {
          _openMapsSheet(context);
        }
      },
    );
  }

  _gotoMap() async {
    // Get list of installed maps and launch first
    final availableMaps = await MapLauncher.installedMaps;
    print(availableMaps); // [AvailableMap { mapName: Google Maps, mapType: google }, ...]
    // [
    //   AvailableMap{
    //   mapName: GoogleMaps,
    //   mapType: google
    // },
    //   AvailableMap{
    //   mapName: Amap,
    //   mapType: amap
    // },
    //   AvailableMap{
    //   mapName: BaiduMaps,
    //   mapType: baidu
    // },
    //   AvailableMap{
    //   mapName: Tencent(QQMaps),
    //   mapType: tencent
    // }
    // ]

    // await availableMaps.first.showMarker(
    //   coords: Coords(latitude, longitude),
    //   title: "Ocean Beach",
    // );
    // await availableMaps[1].showMarker(
    //   coords: Coords(latitude, longitude),
    //   title: "Ocean Beach",
    // );

    // Check if map is installed and launch it #
    var canIn = await MapLauncher.isMapAvailable(MapType.amap);
    print('canIn: $canIn');
    if (await MapLauncher.isMapAvailable(MapType.amap) == true) {
      await MapLauncher.showMarker(
        mapType: MapType.amap,
        coords: Coords(latitude, longitude),
        title: 'title',
        description: 'description',
      );
    }
  }

  _openMapsSheet(context) async {
    try {
      const title = "Ocean Beach";
      final availableMaps = await MapLauncher.installedMaps;

      showModalBottomSheet(
        context: context,
        builder: (BuildContext context) {
          return SafeArea(
            child: SingleChildScrollView(
              child: Wrap(
                children: <Widget>[
                  for (var map in availableMaps)
                    ListTile(
                      onTap: () => map.showMarker(coords: Coords(latitude, longitude), title: title),
                      title: Text(map.mapName),
                      leading: const Icon(Icons.map, size: 30),
                    ),
                ],
              ),
            ),
          );
        },
      );
    } catch (e) {
      print(e);
    }
  }
}

jh_map_utils实现代码

///  jh_map_utils.dart
///
///  Created by iotjin on 2023/05/06.
///  description:

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
import 'jh_device_utils.dart';

class JhMapUtils {
  /// 跳转其他App
  static Future<void> jumpApp({String? url, String message = '跳转失败！'}) async {
    final Uri uri = Uri.parse(url ?? '');
    if (await canLaunchUrl(uri)) {
      await launchUrl(uri);
    } else {
      debugPrint(message);
      // JhProgressHUD.showText(message);
    }
  }

  /// 判断地图是否有安装
  static Future<bool> isInstallMap(String url) async {
    // var url = Uri.parse(Uri.encodeFull(url));
    final Uri uri = Uri.parse(url);
    bool canLaunch = await canLaunchUrl(uri);
    debugPrint('canLaunch: $canLaunch');
    return canLaunchUrl(uri);
  }

  /// 跳转高德导航 - 路径规划
  /// 高德地图官方文档 - Android: https://lbs.amap.com/api/amap-mobile/guide/android/route
  /// 高德地图官方文档 - iOS: https://lbs.amap.com/api/amap-mobile/guide/ios/route
  static void openAMapNavi({
    double? sLatitude, // 起点纬度
    double? sLongitude, // 起点经度
    String sName = '', // 起点名称
    required double dLatitude, // 终点纬度
    required double dLongitude, // 终点经度
    String dName = '', // 终点名称
    String dev = '0', // 起终点是否偏移。0:lat和lon是已经加密后的,不需要国测加密;1:需要国测加密，可为空，但起点或终点不为空时，不能为空
    String t = '0', // t = 0 驾车；    t = 1 公交；    t = 2 步行；    t = 3 骑行（骑行仅在V788以上版本支持）
    String message = '您没有安装高德地图，请先安装高德地图！',
  }) async {
    if (!JhDeviceUtils.isMobile) {
      return;
    }
    var type = JhDeviceUtils.isIOS ? 'iosamap://path?sourceApplication=applicationName&' : 'amapuri://route/plan/?';
    var url =
        '${type}sid=&slat=${sLatitude ?? ''}&slon=${sLongitude ?? ''}&sname=$sName&dlat=$dLatitude&dlon=$dLongitude&dname=$dName&dev=$dev&t=$t';
    // if (!(await canLaunchUrl(Uri.parse(url)))) {
    //   debugPrint(message);
    //   // JhProgressHUD.showText(message);
    //   return;
    // }
    await launchUrl(Uri.parse(url));
  }

  /// 跳转高德导航
  /// 高德地图官方文档: https://lbs.amap.com/api/amap-mobile/guide/android/navigation
  static void openAMapNavi2({
    required double latitude,
    required double longitude,
    String poiName = '',
    String dev = '0', // 是否偏移(0:lat 和 lon 是已经加密后的,不需要国测加密; 1:需要国测加密)
    String message = '您没有安装高德地图，请先安装高德地图！',
  }) async {
    var device = JhDeviceUtils.isAndroid ? 'android' : 'ios';
    var url = '${device}amap://navi?sourceApplication=amap&poiname=$poiName&lat=$latitude&lon=$longitude&dev=$dev';
    // if (!(await canLaunchUrl(Uri.parse(url)))) {
    //   debugPrint(message);
    //   // JhProgressHUD.showText(message);
    //   return;
    // }
    await launchUrl(Uri.parse(url));
  }

  /// 跳转百度导航 - 路径规划
  /// 百度地图官方文档: https://lbsyun.baidu.com/index.php?title=uri/api/android
  static void openBaiduMapNavi({
    double? sLatitude, // 起点纬度
    double? sLongitude, // 起点经度
    String sName = '', // 起点名称
    required double dLatitude, // 终点纬度
    required double dLongitude, // 终点经度
    String dName = '', // 终点名称
    String mode = 'driving', // 导航模式，可选transit（公交）、driving（驾车）、walking（步行）和riding（骑行）默认:driving
    String coordType =
        'gcj02', // 坐标类型，必选参数。coord_type= bd09ll 允许的值为：bd09ll（百度经纬度坐标） bd09mc（百度墨卡托坐标） gcj02（经国测局加密的坐标） wgs84（gps获取的原始坐标）
    String message = '您没有安装百度地图，请先安装百度地图！',
  }) async {
    var url =
        'baidumap://map/direction?origin=name:$sName|latlng:$sLatitude,$sLongitude&destination=name:$dName|latlng:$dLatitude,$dLongitude&mode=$mode&coord_type=$coordType';
    // if (!(await canLaunchUrl(Uri.parse(url)))) {
    //   debugPrint(message);
    //   // JhProgressHUD.showText(message);
    //   return;
    // }
    await launchUrl(Uri.parse(url));
  }

  /// 跳转腾讯导航
  /// 腾讯地图官方文档: https://lbs.qq.com/webApi/uriV1/uriGuide/uriMobileRoute
  static void openTencentMapNavi({
    double? sLatitude, // 起点纬度
    double? sLongitude, // 起点经度
    String sName = '', // 起点名称
    required double dLatitude, // 终点纬度
    required double dLongitude, // 终点经度
    String dName = '', // 终点名称
    String type = 'drive', // 路线规划方式参数：  公交：bus  驾车：drive  步行：walk  骑行：bike
    String referer = 'OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77', // 请填写开发者key，
    String message = '您没有安装腾讯地图，请先安装腾讯地图！',
  }) async {
    // 起点坐标，格式：lat,lng （纬度在前，经度在后，逗号分隔）  功能参数值：CurrentLocation ：使用定位点作为起点坐标
    var formInfo = (sLatitude == null || sLongitude == null)
        ? 'from=$sName&CurrentLocation'
        : 'from=$sName&fromcoord=$sLatitude,$sLongitude';
    var url = 'qqmap://map/routeplan?type=$type&${formInfo}&to=$dName&tocoord=$dLatitude,$dLongitude&referer=$referer';
    // if (!(await canLaunchUrl(Uri.parse(url)))) {
    //   debugPrint(message);
    //   // JhProgressHUD.showText(message);
    //   return;
    // }
    await launchUrl(Uri.parse(url));
  }

  static const double earthRadius = 6378.137; //地球半径

  //计算两点间距离
  static double distance(double lat1, double lng1, double lat2, double lng2) {
    double radLat1 = _rad(lat1);
    double radLat2 = _rad(lat2);
    double a = radLat1 - radLat2;
    double b = _rad(lng1) - _rad(lng2);
    double s = 2 * asin(sqrt(pow(sin(a / 2), 2) + cos(radLat1) * cos(radLat2) * pow(sin(b / 2), 2)));
    s *= earthRadius;
    s = (s * 10000).round() / 10000;
    return s;
  }

  static double _rad(double d) {
    return d * pi / 180.0; //角度转换成弧度
  }
}

到了这里，关于Flutter - APP跳转高德、百度、腾讯、谷歌地图的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！