首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在flutter中显示google地图中的旅行时间?

在Flutter中显示Google地图中的旅行时间,可以通过以下步骤实现:

  1. 首先,确保你已经在Google Cloud平台上创建了一个项目,并启用了Google Maps API。获取到API密钥。
  2. 在Flutter项目的pubspec.yaml文件中添加google_maps_flutter插件的依赖:
代码语言:txt
复制
dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^1.2.0
  1. 在Flutter项目中引入google_maps_flutter插件,并在需要显示地图的页面中创建一个GoogleMap组件:
代码语言:txt
复制
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class MapPage extends StatefulWidget {
  @override
  _MapPageState createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  GoogleMapController mapController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google Maps'),
      ),
      body: GoogleMap(
        onMapCreated: (controller) {
          setState(() {
            mapController = controller;
          });
        },
        initialCameraPosition: CameraPosition(
          target: LatLng(37.7749, -122.4194), // 设置地图初始位置
          zoom: 12.0, // 设置地图初始缩放级别
        ),
      ),
    );
  }
}
  1. 在GoogleMap组件的onMapCreated回调中,可以通过GoogleMapController来控制地图的行为。在这个回调中,你可以使用Google Maps Directions API来获取旅行时间。
代码语言:txt
复制
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class MapPage extends StatefulWidget {
  @override
  _MapPageState createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  GoogleMapController mapController;
  String travelTime = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google Maps'),
      ),
      body: Column(
        children: [
          Expanded(
            child: GoogleMap(
              onMapCreated: (controller) {
                setState(() {
                  mapController = controller;
                });
              },
              initialCameraPosition: CameraPosition(
                target: LatLng(37.7749, -122.4194),
                zoom: 12.0,
              ),
            ),
          ),
          RaisedButton(
            child: Text('获取旅行时间'),
            onPressed: () {
              getTravelTime();
            },
          ),
          Text(travelTime),
        ],
      ),
    );
  }

  void getTravelTime() async {
    final response = await http.get(
        'https://maps.googleapis.com/maps/api/directions/json?origin=37.7749,-122.4194&destination=37.7749,-122.5194&key=YOUR_API_KEY');
    final data = json.decode(response.body);
    final duration = data['routes'][0]['legs'][0]['duration']['text'];
    setState(() {
      travelTime = '旅行时间:$duration';
    });
  }
}

在上述代码中,getTravelTime函数使用http包发送HTTP GET请求到Google Maps Directions API,并解析返回的JSON数据以获取旅行时间。请确保将YOUR_API_KEY替换为你在步骤1中获取到的API密钥。

这样,当用户点击"获取旅行时间"按钮时,就会调用getTravelTime函数并更新travelTime变量,从而在界面上显示旅行时间。

请注意,以上代码仅为示例,你可以根据自己的需求进行修改和扩展。同时,为了保证应用的安全性和稳定性,建议将API密钥存储在安全的地方,而不是直接在代码中硬编码。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

谷歌旅游AI小助手: 不只订酒店,想去哪玩、爱吃什么TA都知道!

但是,那些看似随意、一时兴起搜索——比如“墨西哥城最好玉米饼”,或者“如何在马背上做瑜伽”——为谷歌提供了极好线索,告诉它你下次旅行可能感兴趣地方。...Google Travel中新Potential Trips 功能 Source: Google 如何使用:在移动浏览器输入网址:google.com/travel/trips。...点击你研究过任何目的,会找到最近搜索查询,Google目的旅行指南以及你可能在Google Flights上跟踪所有路线。...预测航班延误通知 如果你使用Gmail地址来确认你机票预订,谷歌会清楚了解你旅行时间和地点。...(如果你喜欢更高端酒店或不同日期,点击进入会显示更多选项。) Holden说:“我们提供全面的信息和相关见解,以帮助旅行者减轻决策过程压力。我们希望让旅行更轻松。”

79330

弃坑 RN,入坑 Flutter,同程旅行架构师给了这四点理由

随后,谷歌在 2017 年推出了 Flutter,它目标是解决移动开发跨平台、高性能问题。...如何保证跨平台技术可以保证跨端一致性、减少多端开发投入、提升开发效率,是所有开发者在不断探索和共同努力方向,很多跨平台框架 Hybrid、React Native、Weex、Flutter 等跨平台技术也由此应运而生...目前同程旅行 App 使用是混合开发模式,Native 开发无感知集成到 App ,目前分为上线集成模式和开发调试模式,分别用来集成 debug 产物和 release 产物,都以 Native 组件方式集成进来...但是在我看来随着时间推移和社区完善,这些问题肯定可以得到很好解决。 InfoQ:您认为 Flutter 未来趋势如何呢?...; 第三,随着越来越多开发者加入到 Flutter 开发阵营和社区生态完善,开发者遇到问题可得到越来越快速解决; 第四,Google 大力推广 Flutter,从频繁版本发布我们可以看出 Google

81210

【老孟FlutterFlutter 2 新增功能

自9月Flutter 1.22发布以来,我们已经关闭了5807期并合并了298位贡献者4091个PR。特别感谢我们志愿者捐助者,他们慷慨抽出时间来改进Flutter项目。...Google Mobile Ads to Beta 除了Flutter桌面版移至测试版,今天我们很高兴宣布FlutterGoogle移动广告SDK公开测试版。...但是,为了使我们能够随着时间推移不断改进Flutter,我们希望能够对API进行重大更改。问题是,如何在不中断开发人员情况下继续改进Flutter API? 我们答案是Flutter Fix。...这只是Flutter DevTools 2更多新功能摘要: 在Flutter框架图中添加了平均FPS信息并提高了可用性 用红色错误标签在网络事件探查器调出失败网络请求 新内存视图图表更快,更小且更易于使用...我们在Google Flutter团队所有成员,我们要说-谢谢。

7.8K20

两分钟带你快速搭建Flutter开发环境(Windows)

在这篇文章,将带着大家一起在Windows平台上快速搭建Flutter开发环境,同时会将搭建Flutter开发环境一些技巧和经验分享给大家。...2.解压安装包到你想安装目录,:C:\flutter; 注意,不要将flutter安装到需要一些高权限路径C:\Program Files\等。...flutter doctor 该命令检查你环境并在终端窗口中显示报告。...大家在安装过程遇到问题无法解决,可以在我们课程问答区提问进行提问; 在 Android Virtual Device Manager, 点击工具栏 Run,模拟器启动并显示所选操作系统版本或设备启动画面...; 通过flutter run运行启动项目; 如何在Android真机运行?

8K10

Flutter 1.22 正式发布

该软件包有助于解决诸如如何正确将字符串(“ A in text in English”)缩写为前15个字符问题。使用String类,该缩写为“ A??...Google Maps和WebView插件准备投入生产 在Flutter小组这里,我们通常会谨慎将某些标签标记为“生产就绪”,直到我们对自己进行彻底测试为止。...如果您想使用平台视图在iOS或Android上托管自己本机UI组件,则可以了解如何在使用平台视图在Flutter应用托管本机Android和iOS视图上。...预览:平滑滚动以提供不匹配输入和显示频率 当输入和显示频率不同时,Flutter团队与Google内部合作伙伴合作,极大地提高了滚动性能。...IntelliJ托管DevTools检查器选项卡 一段时间以来,我们一直在维护某些Flutter工具两个副本,例如IntelliJInspector窗格和Dart DevToolsInspector

7.4K20

关于Flutter 2.5稳定版你知道多少?

该版本进行了一些性能上改进:首先是一项用于从离线训练运行连接 Metal 着色器预编译 PR (#25644),这将最坏情况下光栅化时间减少了 2/3 (如我们基准测试所示),将第 99 百分位时间减少了一半...你可以在 DevTools 框架图中看到这一点,该图表重构之后已经支持了实时展示;当你应用正在渲染时,它们数据会被填入该图中。从这个图表中选择一个构建帧,就可以跳转到该帧时间线事件。...Flutter 引擎现在也能识别时间线着色器编译事件。Flutter DevTools 使用这些事件来帮助您诊断应用着色器编译缺陷。...在插件设置 / 偏好页面有一个新文本字段。 注意,这对定义为类静态常量图标有效,屏幕截图中示例代码所示。...最后,一既往感谢世界各地 Flutter 社区组织和社区成员们,是社区让这一切成为可能。在本次更新贡献和审核 1000 多个 PR 数百位开发者,因为有你们每个人努力才成就了本次成果。

3.6K20

Flutter 2.8 新特性【flutter专题17】

例如在 Android 上渲染第一帧之前,Flutter 现在 只通知 Dart VM TRIM_LEVEL_RUNNING_CRITICAL 及以上内存压力信号,在本地测试,这个更改将低端设备上第一帧时间减少了多达...出于严谨考虑,在之前版本 Flutter 创建平台视图时会阻塞平台线程,这次通过详细推理和测试 确定了可以删除一些序列化,这个改进消除了在低端设备上启动 Google Pay 期间超过 100...Profiling 以便更好了解应用程序性能问题,在应用程序启动时启用,2.8 版本现在会将跟踪事件发送到 Android systrace 记录器,即使 Flutter 应用程序构建在发布模式下也会发送这些事件...启用这些跟踪功能任何一个后,时间轴将包含用于构建 Widget、布置渲染对象和绘制渲染对象新事件(视情况而定)。...如果开发者使用google_maps_flutter 插件或 video_player 插件 web 版本,或者你已经遵循了 Flutter 团队关于如何优化网络上显示图像建议,那么您其实已经在使用

2.4K10

Flutter for Web:跨平台移动与Web开发新篇章

FlutterGoogle推出一款开源UI工具包,用于构建高性能、高保真度跨平台应用程序。...学习曲线:对于已熟悉Dart和Flutter开发者,Flutter for Web学习曲线较低。对于没有Flutter背景开发者,可能需要花费时间学习新框架和语言。...Flutter跨平台能力让Reflectly团队能够快速将他们应用扩展到Web,同时保持与移动应用相同高质量UI和UX。 3....更好性能:Google将持续优化Flutter for Web性能,包括更快编译速度、更小包体积和更高渲染效率。...编写UI代码 在lib/main.dart,我们将构建应用基本UI。这里使用MaterialApp作为根Widget,定义一个简单页面来显示天气信息。

8910

一篇文章带你看遍Google IO 2019大会

扫描饭店菜单它可以帮你推荐该饭店热门菜,扫描杂志美食它可以向你演示该美食制作过程,扫描一段外文它可以帮你自动翻译,并且直接朗读出来,这对于经常出国旅行朋友以及一些有文字阅读障碍的人群来讲是一项非常有帮助功能...Google工程师Chet Haase上来就重提了一下Google对于隐私与安全有多么重视,在Android Q更是加入了诸多能够帮助用户更好管理自己隐私功能,并提倡大家多多使用Android Q...在收到全球开发者各种反馈之后,Android Studio团队花了6个月时间没有开发任何新功能,而是专门处理之前版本崩溃、性能问题、界面卡死、内存泄漏等等之类bug。...举个例子,只要开发者按照Google Assistant规定格式来配置属性,在Google搜索相关内容时就可以显示诸如下图中步骤过程,让用户可以一目了然。 ?...人工智能主题持续时间非常长,上面我也只是简单总结了一下而已。本来就在我以为Developer Keynote所有内容都要结束时候,接下来还有一个主题没有被忘记,那就是Flutter

63830

Flutter 3更新详解

上创建平台渲染菜单栏,支持插入仅限该平台使用菜单,并控制 macOS 应用菜单显示内容。...同时支持第三方输入法,搜狗 (Sogou)、谷歌日文输入法 (Google Japanese Input) 等。...在为此优化构建基准测试,此用例下栅格化时间提升了 一个数量级。在今后版本,我们计划为更多场景应用此优化。...目前 Impeller 尚未实现 Flutter 所有功能特性,但我们对它在 flutter/gallery 应用实现保真度和性能感到满意,并且很高兴在这里和大家分享开发进度。...Android 上内联广 告 使用 google_mobile_ads package 时,您应该可以感受到用户关键交互 (页面之间滚动和切换) 性能有所提升。

3.5K20

Flutter】滑动效果评价组件

Flutter」是GoogleUI工具包,可通过一个代码库构建漂亮,本机编译移动,Web和桌面应用程序。 在在本博客,我们将探讨「Flutter**Reviews Slider。...**我们将看到如何在flutter应用程序中使用「reviews_slider」包来实现带有生动变化微笑演示程序Reviews Slider演示程序。...该演示视频演示了如何在flutter中使用评论滑块。它显示了使用「Flutter」应用程序「reviews_slider」包,评论滑块将如何工作。...当用户从左到右或从右到左旋转微笑并更改形状时,它显示了一个具有变化微笑动画小部件。它会显示在您设备上。...当我们运行应用程序时,我们应该获得屏幕输出,屏幕下方截图所示。

4.4K50

Flutter基础-环境搭建及demo运行

有表现力及灵活UI 快速将特性集中在客户端用户体验上.分层体系结构允许深度定制,最终呈现快速渲染以及有表现力和灵活设计 原生表现 Flutter小部件包含了所有关键平台差异,滚动...运行 flutter doctor会显示剩余需要去安装依赖....第一次运行 flutter 命令 ( flutter doctor), 会自行开始下载依赖库并编译. 后续运行就会变多....这里说句题外话 , 几年前谣传谷歌要采用新 Android 开发语言 Sky 代替 Java . 后面沉溺了一段时间 , 它还是被谷歌发布出来了,只不过现在叫 Flutter ....但不难发现 Flutter多少还是有易容前影子,比如上图中第二个加载包就叫 sky_engine … 编辑器设置 环境搭建好了 , 开始选择编辑器了.

3K40

Flutter 2.8 release 发布,快来看看新特性吧

与往常一样,Flutter 工作第一位就是保证质量,我们花费了大量时间来确保 Flutter 在支持设备范围内可以尽可能平稳和稳健运行。...Profiling 以便更好了解应用程序性能问题,在应用程序启动时启用,2.8 版本现在会将跟踪事件发送到 Android systrace 记录器,即使 Flutter 应用程序构建在发布模式下也会发送这些事件...image.png 启用这些跟踪功能任何一个后,时间轴将包含用于构建 Widget、布置渲染对象和绘制渲染对象新事件(视情况而定)。...选择此标签会显示应用启动配置文件数据。...如果开发者使用google_maps_flutter 插件或 video_player 插件 web 版本,或者你已经遵循了 Flutter 团队关于如何优化网络上显示图像建议,那么您其实已经在使用

4.2K20

Flutter图像编辑器应用(1)—— 亮度和对比度调节实现

无论是一次特别的旅行、一次难忘聚会,还是家庭孩子们成长每一个瞬间,图像都是珍贵见证者。因此,拥有一个简单易用、功能丰富图像编辑器对于每个人来说都是至关重要。...Flutter就像是设计工具,为提供了无与伦比创作自由。Flutter是由Google开发跨平台移动应用开发框架,以其快速、美观和灵活特性而闻名。...为让用户能够从设备相册中选择图像,使用Flutter提供Image Picker库。该库可以让轻松访问设备相册,并选择要编辑图像。...用户点击按钮后,将会打开设备相册,并允许用户选择一张图像。选择完成后,将更新图像提供者,以在应用显示所选择图像。实现亮度和对比度调整功能接下来,实现调整图像亮度和对比度功能。...包含选择图像、调整亮度和对比度以及保存图像功能。2. _pickImage函数_pickImage函数用于从设备相册中选择图像,并将选定图像显示在应用程序

18510

扔掉小红书,国外自由行:Pokémon Go 和 Google Gemini 帮助打造最强旅游 Copilot

在接下来部分,我们将探讨 Pokémon Go 和大语言模型如何在旅行过程中继续支持游客,提供指导和见解,让大家自信而轻松地探索世界。...在接下来部分,我将说明这一创新系统如何增强旅行体验。在旅行过程,传统语音导览设备和真人导游可以被 Pokémon Go 和 Google Gemini 取代或增强。...PokéStops 和 Wayspots 是探索“我附近”(Near Me) 兴趣点最佳方式,这些兴趣点通常是导游不知道Google 地图不显示。...有了 Gemini,我能够更深入了解周围历史和文化,发掘隐藏瑰宝和不为人知故事,丰富旅行体验。 Google Gemini 比专业导游更能讲解世界。...不间断可用性 与传统导游可用性和能力可能受到时间和资源限制不同,Pokémon Go 和 Google Gemini 提供全天候帮助,确保旅行者可以随时获得答案和建议,而无需等待或安排预约。

9810

不得不看Flutter与Android混合开发

flutter页面构建成View,通过addView来显示flutter页面 将flutter页面构建成Fragment,通过对fragment操作来显示flutter页面 2.1、将flutter...页面构建成View 在flutter模块Flutter给我们提供了一个方法——createView。...其次,在flutter模块输入命令flutter attach,就会显示以下内容。 ? 3. 最后,再次打开应用,就会出现如下内容。 ? 请注意图中这段话 ?...3.2、flutter模块调试 其实混合项目的flutter模块调试与flutter项目的唯一却别就是如何在Android Studio与设备之间建立socket连接。...进阶实践技术;希望能帮助到大家,也节省大家在网上搜索资料时间来学习,也可以分享动态给身边好友一起学习!

5.3K41

Flutter】自定义滚动开关

工作就像房子电源开关。 本文中,我们将探讨Flutter **Custom Rolling Switch in Flutter。...假设此属性价值回报为true,则此开关为ON,为OFF则为false。当此属性无效时,开关小部件会失效。 该演示视频展示了如何在颤动创建自定义滚动开关。...它显示了自定义滚动开关如何在flutter应用程序中使用lite_rolling_switch包工作。...**animationDuration:**此属性用于动画完成一个周期应花费时间。 **colorOn:**此属性用于在开关打开时显示颜色。...我们将添加animationDuration手段来延迟动画开始并添加onChanged表示用户打开或关闭开关时间。当我们运行应用程序时,我们应该获得屏幕输出,屏幕下方截图所示。

33.3K60
领券