flutter 第三方地图导航实现

知识准备

这里实现flutter第三方地图导航，选用最简单的方式--调用第三方地图客户端；但各种地图客户端用的坐标系不一定相同，先了解下常见的坐标系：

WGS84坐标系：即地球坐标系，国际上通用的坐标系。
GCJ02坐标系：即火星坐标系，WGS84坐标系经加密后的坐标系。
BD09坐标系：即百度坐标系，GCJ02坐标系经加密后的坐标系。

地图应用api坐标系：

百度地图api:百度坐标系，即BD09坐标系
高德地图api:火星坐标系，即GCJ02坐标系
腾讯地图api:火星坐标系，即GCJ02坐标系

实现步骤

第一步、引入url_launcher

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

  url_launcher: ^5.4.10

一般android和ios调起第三方应用是通过scheme方式，这里调起第三方地图客户端导航也一样，如高德地图，ios scheme为iosamap，android scheme为androidamap; 所以flutter需要引用url_launcher;

第二步、跳转导航封装

import 'dart:io';

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

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

    return gotoMap(
        url: url,
        toInstallCallBack: () {
          if (null != toInstallCallBack) {
            toInstallCallBack();
          }
        });
  }

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

    return gotoMap(
        url: url,
        toInstallCallBack: () {
          if (null != toInstallCallBack) {
            toInstallCallBack();
          }
        });
  }

  /// 百度地图导航
  static Future<bool> gotoBaiduMap(
      {longitude, latitude, VoidCallback toInstallCallBack}) async {
    var url =
        'baidumap://map/direction?destination=$latitude,$longitude&coord_type=gcj02&mode=driving';
    return gotoMap(
        url: url,
        toInstallCallBack: () {
          if (null != toInstallCallBack) {
            toInstallCallBack();
          }
        });
  }

  /// 跳转到第三方地图
  /// [url]跳转地址
  /// [toInstallCallBack]地图未安装回调
  static Future<bool> gotoMap(
      {String url, VoidCallback toInstallCallBack}) async {
    bool canLaunchUrl = await isMapInstall(url);

    if (!canLaunchUrl) {
      if (null != toInstallCallBack) {
        toInstallCallBack();
      }

      return false;
    }

    await launch(url);

    return true;
  }

  static void toInstallMap(String url) {
    launch(url);
  }

  static Future<bool> isBaiduMapInstall() {
    return canLaunch('baidumap://map/direction');
  }

  static Future<bool> isTencentMapInstall() {
    return canLaunch('qqmap://map/routeplan');
  }

  static Future<bool> isAmapMapInstall() {
    return canLaunch('${Platform.isAndroid ? 'android' : 'ios'}amap://navi');
  }

  /// 判断地图是否有安装
  static Future<bool> isMapInstall(String url) {
    return canLaunch(url);
  }
}

第三步、IOS配置(Android不需要配置)

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

注意事项：

• 经纬度坐标系必须一致，否则会出现地点偏移情况；
• 上述代码入参经纬度坐标系统一为GCJ02坐标系，即火星坐标系，如不是，需要先转换成GCJ02坐标系，再传入；

未完待续~~