demo 地址: https://github.com/iotjin/jh_flutter_demo
代碼不定時(shí)更新，請(qǐng)前往github查看最新代碼
這里介紹的是不需要自己開(kāi)發(fā)地圖，直接通過(guò)給定的經(jīng)緯度，跳轉(zhuǎn)到三方地圖APP調(diào)用導(dǎo)航的方式
一種是寫(xiě)的工具類，一種是通過(guò)調(diào)用三方庫(kù)map_launcher實(shí)現(xiàn)的
官方文檔：
-
跳轉(zhuǎn)高德導(dǎo)航 - 路徑規(guī)劃
高德地圖官方文檔 - Android
高德地圖官方文檔 - iOS -
跳轉(zhuǎn)高德導(dǎo)航
高德地圖官方文檔 -
跳轉(zhuǎn)百度導(dǎo)航 - 路徑規(guī)劃
百度地圖官方文檔 -
跳轉(zhuǎn)騰訊導(dǎo)航
騰訊地圖官方文檔
參考文章：
Flutter 跳轉(zhuǎn)地圖軟件調(diào)起導(dǎo)航：百度、高德、騰訊、蘋(píng)果
Flutter 實(shí)戰(zhàn)調(diào)起三方地圖導(dǎo)航（高德、百度、騰訊、蘋(píng)果）
插件：
map_launcher
flutter_map
maps_launcher文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-808571.html
實(shí)現(xiàn)
在 pubspec.yaml 文件中添加依賴插件：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-808571.html
# url打開(kāi)工具 https://pub.flutter-io.cn/packages/url_launcher
url_launcher: ^6.1.14
# 打開(kāi)地圖工具 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: 跳轉(zhuǎn)三方地圖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)',
'三方庫(kù)跳轉(zhuǎn)高德(map_launcher)',
'三方庫(kù)彈出地圖列表(map_launcher)',
];
class MapJumpTestPage extends StatefulWidget {
const MapJumpTestPage({Key? key}) : super(key: key);
State<MapJumpTestPage> createState() => _MapJumpTestPageState();
}
class _MapJumpTestPageState extends State<MapJumpTestPage> {
var latitude = 39.922869448132474;
var longitude = 116.40748500823975;
Widget build(BuildContext context) {
return JhTextList(
title: '跳轉(zhuǎn)三方地圖導(dǎo)航',
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 == '三方庫(kù)跳轉(zhuǎn)高德(map_launcher)') {
_gotoMap();
}
if (str == '三方庫(kù)彈出地圖列表(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實(shí)現(xiàn)代碼
/// 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 {
/// 跳轉(zhuǎn)其他App
static Future<void> jumpApp({String? url, String message = '跳轉(zhuǎn)失??！'}) 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);
}
/// 跳轉(zhuǎn)高德導(dǎo)航 - 路徑規(guī)劃
/// 高德地圖官方文檔 - 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, // 起點(diǎn)緯度
double? sLongitude, // 起點(diǎn)經(jīng)度
String sName = '', // 起點(diǎn)名稱
required double dLatitude, // 終點(diǎn)緯度
required double dLongitude, // 終點(diǎn)經(jīng)度
String dName = '', // 終點(diǎn)名稱
String dev = '0', // 起終點(diǎn)是否偏移。0:lat和lon是已經(jīng)加密后的,不需要國(guó)測(cè)加密;1:需要國(guó)測(cè)加密，可為空，但起點(diǎn)或終點(diǎn)不為空時(shí)，不能為空
String t = '0', // t = 0 駕車； t = 1 公交； t = 2 步行； t = 3 騎行（騎行僅在V788以上版本支持）
String message = '您沒(méi)有安裝高德地圖，請(qǐng)先安裝高德地圖！',
}) 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));
}
/// 跳轉(zhuǎn)高德導(dǎo)航
/// 高德地圖官方文檔: 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 是已經(jīng)加密后的,不需要國(guó)測(cè)加密; 1:需要國(guó)測(cè)加密)
String message = '您沒(méi)有安裝高德地圖，請(qǐng)先安裝高德地圖！',
}) 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));
}
/// 跳轉(zhuǎn)百度導(dǎo)航 - 路徑規(guī)劃
/// 百度地圖官方文檔: https://lbsyun.baidu.com/index.php?title=uri/api/android
static void openBaiduMapNavi({
double? sLatitude, // 起點(diǎn)緯度
double? sLongitude, // 起點(diǎn)經(jīng)度
String sName = '', // 起點(diǎn)名稱
required double dLatitude, // 終點(diǎn)緯度
required double dLongitude, // 終點(diǎn)經(jīng)度
String dName = '', // 終點(diǎn)名稱
String mode = 'driving', // 導(dǎo)航模式，可選transit（公交）、driving（駕車）、walking（步行）和riding（騎行）默認(rèn):driving
String coordType =
'gcj02', // 坐標(biāo)類型，必選參數(shù)。coord_type= bd09ll 允許的值為：bd09ll（百度經(jīng)緯度坐標(biāo)） bd09mc（百度墨卡托坐標(biāo)） gcj02（經(jīng)國(guó)測(cè)局加密的坐標(biāo)） wgs84（gps獲取的原始坐標(biāo)）
String message = '您沒(méi)有安裝百度地圖，請(qǐng)先安裝百度地圖！',
}) 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));
}
/// 跳轉(zhuǎn)騰訊導(dǎo)航
/// 騰訊地圖官方文檔: https://lbs.qq.com/webApi/uriV1/uriGuide/uriMobileRoute
static void openTencentMapNavi({
double? sLatitude, // 起點(diǎn)緯度
double? sLongitude, // 起點(diǎn)經(jīng)度
String sName = '', // 起點(diǎn)名稱
required double dLatitude, // 終點(diǎn)緯度
required double dLongitude, // 終點(diǎn)經(jīng)度
String dName = '', // 終點(diǎn)名稱
String type = 'drive', // 路線規(guī)劃方式參數(shù)： 公交：bus 駕車：drive 步行：walk 騎行：bike
String referer = 'OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77', // 請(qǐng)?zhí)顚?xiě)開(kāi)發(fā)者key，
String message = '您沒(méi)有安裝騰訊地圖，請(qǐng)先安裝騰訊地圖！',
}) async {
// 起點(diǎn)坐標(biāo)，格式：lat,lng （緯度在前，經(jīng)度在后，逗號(hào)分隔） 功能參數(shù)值：CurrentLocation ：使用定位點(diǎn)作為起點(diǎn)坐標(biāo)
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; //地球半徑
//計(jì)算兩點(diǎn)間距離
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; //角度轉(zhuǎn)換成弧度
}
}
到了這里，關(guān)于Flutter - APP跳轉(zhuǎn)高德、百度、騰訊、谷歌地圖的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
