知識準(zhǔn)備
這里實(shí)現(xiàn)flutter第三方地圖導(dǎo)航,選用最簡單的方式--調(diào)用第三方地圖客戶端搀别;但各種地圖客戶端用的坐標(biāo)系不一定相同,先了解下常見的坐標(biāo)系:
WGS84坐標(biāo)系:即地球坐標(biāo)系,國際上通用的坐標(biāo)系南蓬。
GCJ02坐標(biāo)系:即火星坐標(biāo)系,WGS84坐標(biāo)系經(jīng)加密后的坐標(biāo)系哑了。
BD09坐標(biāo)系:即百度坐標(biāo)系赘方,GCJ02坐標(biāo)系經(jīng)加密后的坐標(biāo)系。
地圖應(yīng)用api坐標(biāo)系:
百度地圖api:百度坐標(biāo)系弱左,即BD09坐標(biāo)系
高德地圖api:火星坐標(biāo)系窄陡,即GCJ02坐標(biāo)系
騰訊地圖api:火星坐標(biāo)系,即GCJ02坐標(biāo)系
實(shí)現(xiàn)步驟
第一步拆火、引入url_launcher
在 pubspec.yaml 文件中添加依賴插件:
url_launcher: ^5.4.10
一般android和ios調(diào)起第三方應(yīng)用是通過scheme方式跳夭,這里調(diào)起第三方地圖客戶端導(dǎo)航也一樣涂圆,如高德地圖,ios scheme為iosamap优妙,android scheme為androidamap; 所以flutter需要引用url_launcher;
第二步乘综、跳轉(zhuǎn)導(dǎo)航封裝
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
class XMapNavigatorUtil {
/// 高德地圖導(dǎo)航
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();
}
});
}
/// 騰訊地圖導(dǎo)航
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();
}
});
}
/// 百度地圖導(dǎo)航
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();
}
});
}
/// 跳轉(zhuǎn)到第三方地圖
/// [url]跳轉(zhuǎn)地址
/// [toInstallCallBack]地圖未安裝回調(diào)
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>
注意事項(xiàng):
- 經(jīng)緯度坐標(biāo)系必須一致套硼,否則會出現(xiàn)地點(diǎn)偏移情況卡辰;
- 上述代碼入?yún)⒔?jīng)緯度坐標(biāo)系統(tǒng)一為GCJ02坐標(biāo)系,即火星坐標(biāo)系邪意,如不是九妈,需要先轉(zhuǎn)換成GCJ02坐標(biāo)系,再傳入雾鬼;
未完待續(xù)~~