首页
学习
活动
专区
工具
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说:“我们提供全面的信息和相关的见解,以帮助旅行者减轻决策过程中的压力。我们希望让旅行更轻松。”

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

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

    89110

    【老孟Flutter】Flutter 2 新增的功能

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

    7.9K20

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

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

    8.1K10

    Flutter 与 React Native - 详细深入对比分析(2024 年)

    2022年年度 Stack Overflow 调查结果显示,使用这些技术进行商业项目及其他用途的开发者在 Flutter 与 React Native 的争论中竞争激烈。...如您所见,Flutter的社区在GitHub上关闭的问题数量远超过React Native。这一点很重要,因为错误可能会显著降低应用的用户体验,而当问题长时间未解决时,错误将持续存在。...这意味着开发者可以轻松地在应用中实现Material Design的原则和组件,几乎不需要额外的努力。...在Flutter中,您可以使用许多由Google官方开发的SDK(例如,移动端的Google Ads SDK)。...此外,还有一份全面的逐步指南,展示了如何在移动应用中实现四种不同的人工智能使用案例。

    97301

    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工具的两个副本,例如IntelliJ中的Inspector窗格和Dart DevTools中的Inspector

    7.5K20

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

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

    3.7K20

    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

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

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

    67530

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

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

    34110

    Android开发技能图谱

    ,以及如何在主线程中更新UI。...扩展阅读 遗留系统现代化:理解、策略与案例 3.2 Android Jetpack Android Jetpack是一套由Google推出的Android开发组件库,旨在帮助开发者更轻松地构建高质量的应用...你需要熟悉一些常见的设计模式,如单例模式、工厂模式、观察者模式等,并了解如何在Android开发中应用它们。...扩展阅读 遵循SOLID原则:构建高内聚低耦合的代码 Java编程规范及最佳实践 四、跨平台开发框架 4.1 Flutter Flutter是Google推出的一个开源的UI开发框架,可以用于构建跨平台的...此外,你还可以使用一些跨平台的C++库来帮助你编写跨平台的逻辑层,如Base库、Boost、POCO、ACE等。这些库提供了一些更高级的功能,如网络编程、多线程、文件系统操作、日期和时间处理等。

    12110

    Flutter 3更新详解

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

    3.6K20

    IT入门知识第七部分《移动开发》(710)

    本文将探讨移动开发平台,包括Android和iOS,以及跨平台开发技术,如React Native和Flutter。 1....主要应用于移动设备,如智能手机和平板电脑,由美国Google公司和开放手机联盟领导及开发。Android操作系统最初由安迪·鲁宾开发,主要支持手机。2005年8月由Google收购注资。...} } 代码分析: 这段Swift代码展示了如何在iOS应用中添加一个简单的点击手势识别。 当视图被轻拍时,控制台将输出"Screen Tapped!"。 2....2.2 Flutter Flutter是Google开源的构建用户界面(UI)工具包,帮助开发者通过一套代码库高效构建多平台精美应用,支持移动、Web、桌面和嵌入式平台。...无论是选择专注于Android或iOS平台,还是采用跨平台开发技术如React Native和Flutter,开发者都需要不断学习新技术,以满足市场和用户的需求。

    14110

    【Flutter】滑动效果评价组件

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

    4.5K50

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

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

    3.1K40

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

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

    43010

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

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

    4.2K20
    领券