知识准备
这里实现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坐标系,再传入;
未完待续~~