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 文件中添加依赖插件：

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

示例demo

///  map_jump_test_page.dart
///
///  Created by iotjin on 2023/10/16.
///  description: 跳转三方地图APPimport '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_printfinal List titleData = ['高德(JhMapUtils)','高德2(JhMapUtils)','百度(JhMapUtils)','腾讯(JhMapUtils)','三方库跳转高德(map_launcher)','三方库弹出地图列表(map_launcher)',
];class MapJumpTestPage extends StatefulWidget {const MapJumpTestPage({Key? key}) : super(key: key);@overrideState<MapJumpTestPage> createState() => _MapJumpTestPageState();
}class _MapJumpTestPageState extends State<MapJumpTestPage> {var latitude = 39.922869448132474;var longitude = 116.40748500823975;@overrideWidget 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 firstfinal 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 {/// 跳转其他Appstatic 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/routestatic 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/navigationstatic 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/androidstatic void openBaiduMapNavi({double? sLatitude, // 起点纬度double? sLongitude, // 起点经度String sName = '', // 起点名称required double dLatitude, // 终点纬度required double dLongitude, // 终点经度String dName = '', // 终点名称String mode = 'driving', // 导航模式，可选transit（公交）、driving（驾车）、walking（步行）和riding（骑行）默认:drivingString 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/uriMobileRoutestatic void openTencentMapNavi({double? sLatitude, // 起点纬度double? sLongitude, // 起点经度String sName = '', // 起点名称required double dLatitude, // 终点纬度required double dLongitude, // 终点经度String dName = '', // 终点名称String type = 'drive', // 路线规划方式参数：  公交：bus  驾车：drive  步行：walk  骑行：bikeString 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; //角度转换成弧度}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/112529.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

安装Sentinel

安装Sentinel

大家好今天来安装Sentinel . 安装Sentinel 下载 : 大家可以选择相应版本(最新版本1.8.6) 官网下载地址 : Release v1.8.6 alibaba/Sentinel GitHub 链接&#xff1a;Sentinel_免费高速下载|百度网盘-分享无限制 (baidu.com) 提取码&#xff1a;8eh9 运行 : 将jar包放到任…
阅读更多...
Youtrack Linux 安装

Youtrack Linux 安装

我们考虑最后应该使用的是 ZIP 方式的安装。 按照官方的说法如何设置运行 YouTrack 应该是非常简单的。 准备环境 根据官方的说法&#xff0c;我们需要做的就是下载 Zip 包&#xff0c;然后把 Zip 包解压到指定的目录中就可以了。 下载 当前官方的下载地址为&#xff1a;Ge…
阅读更多...
华为OD 身高体重排序（100分）【java】A卷+B卷

华为OD 身高体重排序（100分）【java】A卷+B卷

华为OD统一考试A卷+B卷 新题库说明 你收到的链接上面会标注A卷还是B卷。目前大部分收到的都是B卷。 B卷对应20022部分考题以及新出的题目，A卷对应的是新出的题目。 我将持续更新最新题目 获取更多免费题目可前往夸克网盘下载，请点击以下链接进入： 我用夸克网盘分享了「华为O…
阅读更多...
基于nodejs+vue中学信息技术线上学习系统

基于nodejs+vue中学信息技术线上学习系统

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性&#xff1a;…
阅读更多...
单片机郭天祥（02）

单片机郭天祥（02）

1&#xff1a;解决keil5软件的乱码问题&#xff0c;修改编码为UTF-8 2&#xff1a;打开keil5使用debug对编写好的程序进行调试 给程序打上断点 使用仿真芯片 更改设备管理器相关设置 接通电源后点击debug连接到51单片机 使用stc-isp获取延时函数 将延时函数添加进入创建好的…
阅读更多...
17-spring aop调用过程概述

17-spring aop调用过程概述

文章目录 1.源码2. debug过程 1.源码 public class TestAop {public static void main(String[] args) throws Exception {saveGeneratedCGlibProxyFiles(System.getProperty("user.dir") "/proxy");ApplicationContext ac new ClassPathXmlApplication…
阅读更多...
Hadoop面试题（2）

Hadoop面试题（2）

1.什么是数据倾斜&#xff1f;如何处理数据倾斜&#xff1f; 数据倾斜指的是在分布式计算中&#xff0c;数据在某些节点上不均匀地分布&#xff0c;导致某些节点的负载过重&#xff0c;影响整体计算性能。 处理数据倾斜的方法主要包括以下几种&#xff1a; 增加分区数量&…
阅读更多...
在JavaScript中，如何创建一个数组或对象？

在JavaScript中，如何创建一个数组或对象？

在JavaScript中，可以使用以下方式创建数组和对象： 一：创建数组（Array）： 1：使用数组字面量（Array Literal）语法，使用方括号 [] 包裹元素，并用逗号分隔： let array1 = []; // 空数组 let array2 = [1, 2, 3]; // 包含三个数字的数组 let array3 = [apple, banana,…
阅读更多...
慢sql的优化

慢sql的优化

1.索引优化 为查询的字段建立合适的索引&#xff0c;可以大大提高查询速度。分析查询语句&#xff0c;确定需要加索引的字段&#xff0c;并选择适当的索引类型。 2.分析执行计划 使用数据库管理工具分析SQL语句的执行计划&#xff0c;找出可能的性能瓶颈。执行计划可以告诉你数…
阅读更多...
Nautilus Chain 与 Coin98 生态达成合作，加速 Zebec 生态亚洲战略进程

Nautilus Chain 与 Coin98 生态达成合作，加速 Zebec 生态亚洲战略进程

目前&#xff0c;行业内首个模块化 Layer3 架构公链 Nautilus Chain 已经上线主网&#xff0c;揭示了模块化区块链领域迎来了全新的进程。在主网上线后&#xff0c;Nautilus Chain 将扮演 Zebec 生态中最重要的底层设施角色&#xff0c;并将为 Zebec APP 以及 Zebec Payroll 规…
阅读更多...
ESP32C3 LuatOS TM1650②动态显示累加整数

ESP32C3 LuatOS TM1650②动态显示累加整数

--注意:因使用了sys.wait()所有api需要在协程中使用 -- 用法实例 PROJECT "ESP32C3_TM1650" VERSION "1.0.0" _G.sys require("sys") local tm1650 require "tm1650"-- 拆分整数&#xff0c;并把最低位数存放在数组最大索引处 loc…
阅读更多...
第十三届蓝桥杯模拟赛第三期

第十三届蓝桥杯模拟赛第三期

A.填空题 问题描述 请问十六进制数 2021ABCD 对应的十进制是多少&#xff1f; 参考答案 539077581 import java.math.*; public class Main {public static void main(String[] args) {String strnew BigInteger("2021ABCD",16).toString(10);System.out.printl…
阅读更多...
LuatOS-SOC接口文档(air780E)-- io - io操作(扩展)

LuatOS-SOC接口文档(air780E)-- io - io操作(扩展)

示例 -- io模块是lua原生模块,LuatOS增加了一些API -- 请配合os模块一起使用-- 只读模式, 打开文件 local fd io.open("/xxx.txt", "rb") -- 读写默认,打开文件 local fd io.open("/xxx.txt", "wb") -- 写入文件,且截断为0字节 loc…
阅读更多...
用Nginx搭建一个具备缓存功能的反向代理服务

用Nginx搭建一个具备缓存功能的反向代理服务

在同一台服务器上&#xff0c;使用nginx提供服务&#xff0c;然后使用openresty提供反向代理服务。 参考《Ubuntu 20.04使用源码安装nginx 1.14.0》安装nginx。 参考《用Nginx搭建一个可用的静态资源Web服务器》搭建静态资源Web服务器&#xff0c;但是/nginx/conf/nginx.conf里…
阅读更多...
Uniapp软件库源码 全新带勋章功能(包含前后端源码)

Uniapp软件库源码 全新带勋章功能(包含前后端源码)

Uniapp软件库全新带勋章功能&#xff0c;搭建好后台 在前端找到 util 这个文件 把两个js文件上面的填上自己的域名&#xff0c; 电脑需要下载&#xff1a;HBuilderX 登录账号 没有账号就注册账号&#xff0c;然后上传文件&#xff0c;打包选择 “发行” 可以打包app h5等等。…
阅读更多...
异常数据检测 | Python基于Hampel的离群点检测

异常数据检测 | Python基于Hampel的离群点检测

文章目录 文章概述模型描述源码分享文章概述 在时间序列数据分析领域，识别和处理异常点是至关重要的任务。异常点或离群点是明显偏离预期模式的数据点，可能表明存在错误、欺诈或有价值的见解。 应对这一挑战的一种有效技术是汉普尔过滤器（Hampel Filter）。 模型描述 汉…
阅读更多...
spark获取hadoop服务token

spark获取hadoop服务token

spark 作业一直卡在accepted 问题现象问题排查1.查看yarn app日志2.问题分析与原因 问题现象 通过yarn-cluster模式提交spark作业&#xff0c;客户端日志一直卡在submit app&#xff0c;没有运行 问题排查 1.查看yarn app日志 appid已生成&#xff0c;通过yarn查看app状态为…
阅读更多...
Note——torch.size() umr_maximum() array.max() itertools.product()

Note——torch.size() umr_maximum() array.max() itertools.product()

torch.size Problem TypeError: ‘torch.Size’ object is not callable Reason Analysis torch.Size函数不可调用 因为torch只可以.size() 或 shape Solution 将y.shape()替换为y.size() 或 y.shape ytorch.normal(0,0.01,y.size())2 return umr_maximum(a, axis, None…
阅读更多...
云原生之Docker

云原生之Docker

docker 初识Docker什么是DockerDocker与虚拟机Docker相关术语及架构镜像和容器DockerHubDocker架构 Docker命令镜像操作命令容器操作命令数据卷命令 自定义镜像镜像结构Dockerfile DockerCompose安装常用命令 初识Docker 什么是Docker docker是一个快速交付应用&#xff0c;运…
阅读更多...
uniapp接入萤石微信小程序插件

uniapp接入萤石微信小程序插件

萤石官方提供了一些适用于uniapp / 小程序的方案 如 小程序半屏 hls rtmp 等 都TM有坑 文档写的依托答辩 本文参考了uniapp小程序插件 以及 萤石微信小程序插件接入文档 效果如下 1. 插件申请 登录您的小程序微信公众平台&#xff0c;点击左侧菜单栏&#xff0c;进入设置页…
阅读更多...
最新文章

Copyright @ 2022~2023