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

如何在flutter中缩放两个Google地图标记

在 Flutter 中使用 google_maps_flutter 插件时,你可以通过设置地图的视图边界来缩放和居中显示两个或多个标记。以下是一个详细的步骤指南,展示如何实现这一目标。

步骤 1: 添加 google_maps_flutter 依赖

首先,在你的 pubspec.yaml 文件中添加 google_maps_flutter 依赖:

代码语言:javascript
复制
dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.0.6  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

步骤 2: 获取 Google Maps API 密钥

确保你已经在 Google Cloud Platform 上启用了 Google Maps API,并获取了 API 密钥。将 API 密钥添加到你的 Android 和 iOS 项目中。

步骤 3: 创建 GoogleMap 控件

在你的 Flutter 应用中创建一个 GoogleMap 控件,并添加两个标记。以下是一个示例代码:

代码语言:javascript
复制
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MapScreen(),
    );
  }
}

class MapScreen extends StatefulWidget {
  @override
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  GoogleMapController? _controller;
  final Set<Marker> _markers = {};
  final LatLng _marker1 = LatLng(37.7749, -122.4194); // 旧金山
  final LatLng _marker2 = LatLng(34.0522, -118.2437); // 洛杉矶

  @override
  void initState() {
    super.initState();
    _markers.add(Marker(
      markerId: MarkerId('marker1'),
      position: _marker1,
    ));
    _markers.add(Marker(
      markerId: MarkerId('marker2'),
      position: _marker2,
    ));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google Maps Zoom to Markers'),
      ),
      body: GoogleMap(
        initialCameraPosition: CameraPosition(
          target: _marker1,
          zoom: 10,
        ),
        markers: _markers,
        onMapCreated: (GoogleMapController controller) {
          _controller = controller;
          _zoomToFitMarkers();
        },
      ),
    );
  }

  void _zoomToFitMarkers() {
    if (_controller == null) return;

    LatLngBounds bounds;
    if (_marker1.latitude > _marker2.latitude && _marker1.longitude > _marker2.longitude) {
      bounds = LatLngBounds(southwest: _marker2, northeast: _marker1);
    } else if (_marker1.longitude > _marker2.longitude) {
      bounds = LatLngBounds(
          southwest: LatLng(_marker1.latitude, _marker2.longitude),
          northeast: LatLng(_marker2.latitude, _marker1.longitude));
    } else if (_marker1.latitude > _marker2.latitude) {
      bounds = LatLngBounds(
          southwest: LatLng(_marker2.latitude, _marker1.longitude),
          northeast: LatLng(_marker1.latitude, _marker2.longitude));
    } else {
      bounds = LatLngBounds(southwest: _marker1, northeast: _marker2);
    }

    _controller!.animateCamera(CameraUpdate.newLatLngBounds(bounds, 50));
  }
}

代码解释

  1. 初始化标记
    • initState 方法中,初始化两个标记并添加到 _markers 集合中。
  2. 创建 GoogleMap 控件
    • build 方法中,创建一个 GoogleMap 控件,并设置 initialCameraPositionmarkers
    • 使用 onMapCreated 回调获取 GoogleMapController 实例,并调用 _zoomToFitMarkers 方法。
  3. 缩放和居中标记
    • _zoomToFitMarkers 方法中,计算两个标记的边界 LatLngBounds
    • 使用 animateCamera 方法将地图视图缩放和居中到这两个标记。

注意事项

  • API 密钥:确保在 Android 和 iOS 项目中正确配置了 Google Maps API 密钥。
  • 权限:确保在 Android 和 iOS 项目中正确配置了位置权限。
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter 基础系列之手势思维导图(5)

今天我们来了解一下手势这个概念, 先来了解一下手势的优点: 更干净的界面 便于使用 更好地完成任务 增加用户互动 轻松的用户界面 手势类型 现在让我们看看 Flutter 平台提供的手势类型以及可以使用哪些小部件来执行这些手势...我们还将研究一些用例,来判断如何在理想情况下应该使用手势。...它可以是文本、图标甚至图像的任何内容。 导航手势包括: 轻敲 滚动和平移 拖 滑动 捏 动作手势 顾名思义,一个突出的按钮,例如浮动操作按钮,可以通过单击、长按或滑动在当前屏幕上执行快速操作。...动作手势包括: 轻敲 长按 滑动 变换手势 使用两个或多个手指来变换大小、位置和旋转。一个普遍的例子是谷歌地图。用户可以使用双指缩放手势、双击缩放、拖放图钉或旋转地图。...变换手势包括: 双击 捏 (旋转) 选择和移动 请查看下面的思维导图,就可以了解到Flutter 在其小部件中提供了之前提到的所有手势。 Flutter 手势思维导图

1.4K20
  • Flutter之屏幕适配

    Flutter 暂时没有官方的屏幕适配方案,在 Flutter 项目开发目前大部分的适配方案都是通过比例来进行适配,是一个通用的适配方法,该适配方法也在前端、Android、iOS、小程序等开发中广泛使用...原理 UI 设计的时候一般会按照一个固定的尺寸进行设计, 360 x 690 ,实际设备分辨率可能是 Google Pixel: 1080 x 1920 、Google Pixel XL: 1440...基于上面的算法,在项目中就可以实现对应的适配方案了,但本着不重复造轮子的思想,项目开发可以直接使用 flutter_screenutil[1] 这个适配库。...添加依赖 在项目根目录的 pubspec.yaml 添加 flutter_screenutil 的依赖: dependencies: flutter: sdk: flutter # 添加依赖... 1.sh 为整个屏幕高度 使用 sp 作为字体单位,默认是会随着系统字体缩放进行变化,如果不想字体随着系统缩放而变化,可设置 textScaleFactor 为 1.0 来实现。

    2K20

    在 C# 程序嵌入百度地图的全面指南

    本文将深入探讨如何在 C# 程序嵌入百度地图,重点包括环境准备、基本功能实现及一些高级应用。1. 环境准备要在 C# 程序中使用百度地图,首先需要做好开发环境的准备。...3.2 地图自定义百度地图支持多种自定义设置,包括样式、控件、缩放等级等。可以通过 JavaScript API 对地图进行个性化设置。...map.setMapStyle({ styleJson: [...] }); // 自定义地图样式3.3 地图事件处理你可以通过 JavaScript 处理地图上的各种事件,点击、拖动等。...例如,当用户点击地图时,可以在该位置添加标记。...总结本文详细介绍了如何在 C# 程序嵌入百度地图,包括基本功能的实现和一些高级应用。通过结合 C# 后端与 JavaScript 前端,你可以创建功能丰富的地图应用程序。

    23700

    我的一周头条 2349

    高德老弟,AI 现在已内置于 Google 地图中!这里有 6 个让你大吃一惊的人工智能功能,咱学习学习可好: 1. 享受身临其境的视野 体验街道级图像的组合,创建任何位置的令人惊叹的 3D 模型。...地图中的镜头 想象一下,将您的相机对准并见证 Google 地图立即识别并标记您周围的一切。这种人工智能驱动的功能将您的环境理解提升到一个全新的水平。...3.改进导航地图 Google 地图凭借高精度和详细的地图,将导航提升到了新的水平。探索有关当地企业、地标以及沿途所有必看景点的大量信息。 4....Google 使用人工智能和高级图像识别来准确匹配您的搜索。 6. EV(电动汽车)车主的特殊功能 Google 地图现已提供有关充电站的全面信息,保证您整个电动旅程的兼容性和便利性。...确保在挂起的组件获取数据。 如何在 Next.js 14 启用提取请求日志记录 这是一个用于根据内容自动动画高度的 CSS 技巧!#css#通常情况下,这是很难实现的… 除非使用绝对值。

    12710

    Flutter』手势交互

    1.前言经过上篇文章的介绍,已经将跨页面之间跳转的时候传参的方式介绍给大家了,本篇文章将给大家介绍如何在 Flutter 中使用手势交互。...2.手势交互2.1.简介Flutter的手势系统是一个强大且灵活的方式,允许开发者捕获并响应触摸屏上的各种用户交互。2.2.常见手势类型与常用属性Tap(点击):onTap: 当用户轻触屏幕时触发。...Scale(缩放):onScaleStart: 当缩放开始时触发。onScaleUpdate: 在缩放过程连续触发。onScaleEnd: 缩放结束时触发。...MyApp是一个StatelessWidget,它继承自StatelessWidget,并在build方法返回一个MaterialApp。...GestureDetector还包含多个事件处理函数,onTap、onDoubleTap、onLongPress等。这些函数分别在用户点击、双击或长按容器时触发,并在控制台中打印相应的消息。

    43552

    Android平台GPS系统的应用开发

    目前随着智能手机的普及.如何在智能手机开发GPS导航系统可以说是目前的一个热点问题。...Android也提供了一组访问 Google MAP的API,借助Google MAP及定位API,我们就能在地图上显示用户当前的地理位置: Android定义了一个名为com.google.android.maps...我们还可以为应用程序添加一些诸如缩放效果,地图标注,文本等功能。...= gMapView.getOverlays(); list.add(myLocationOverlay); 3、 Google MAP电子地图显示处理 利用Android平台开发导航地图过程,主要采用...其中MapView是一个展示地图的视图,它可以获取键盘事件(onKeyDown和onKeyUp)来支持地图移动和缩放功能,同时也支持多层Overlay,可在地图上画坐标、写地名、画图片等。

    4.3K40

    Google IO ——饭后小菜

    Google地图 Google地图带来全新的沉浸式画面(immersive view),并且可在第三方app上使用实时街景功能。...Google地图的沉浸式画面结合了城市目标景观,甚至是室内的场景,彷佛身历其境一般。并且将结合Google地图的现有常用功能,例如交通繁忙程度和指标等。...Google地图沉浸式实景功能 Google地图上的沉浸式画面新服务 Google搜索 Google为相机识别搜索功能发布新的场景探索(scene exploration)服务,可以允许相机拍摄识别产品...公告指出,Flutter 3 是谷歌完善 Flutter 所支持的平台的旅程的高潮部分;Flutter 3 增加了对 macOS 和 Linux 应用程序的稳定支持,目前其已完成对 6 个主要平台的稳定支持...“在这个版本Flutter 完全原生于 Apple 芯片上进行开发。

    1.2K10

    Matplotlib 中文用户指南 8.1 屏幕截图

    Mission(使用 matplotlib 展示地面跟踪的航天器),Michael Droettboom 在 Charlie Moad 的工作基础上提供了非常精确的椭圆弧的 8-样条近似(见Arc),它对缩放级别并不敏感...源代码 条形图 使用bar()命令创建条形图十分容易,其中包括一些定制(误差条): 源代码 创建堆叠条(bar_stacked.py),蜡烛条(finance_demo.py)和水平条形图(barh_demo.py...此示例描绘了 Google 股票价格的变化,标记的尺寸反映了交易量,并且颜色随时间变化。 这里,ALPHA 属性用于制作半透明圆形标记。...以下示例模拟 ChartDirector 的一个财务图: 源代码 地图示例 Jeff Whitaker 的 Basemap 附加工具包可以在许多不同的地图投影上绘制数据。...此示例展示了如何在直角投影上绘制轮廓,标记和文本,以 NASA 的“蓝色大理石”卫星图像作为背景。

    4.3K30

    小程序Map组件点聚合功能详细接入步骤和ios、Android真机环境

    接下来就是小程序Api MapContext.includePoints缩放视野展示所有经纬度! 最后一个就是标记点markers的callout气泡窗口属性了。...当我们点击标记点的时候就会自动弹出弹窗显示该标记点的一些详细信息 开始接入 点聚合功能 1、wxml创建地图容器 <map enable-3D id="mapId" class="...就是在放大<em>地图</em>展开聚合簇的时候如果操作比较快就会出现部分聚合簇没有展开,会出现尴尬的一个聚合簇显示在<em>两个</em>标注点之间!这个找了好久也没有发现原因!最终解决方案是找到了,但是原理还是没搞清楚!...<em>地图</em>中心点的确定 如<em>何在</em><em>地图</em>有限的空间内十分合理的布局所有的<em>标记</em>点就关系到<em>地图</em>中心点的确定问题了 MapContext.includePoints(Object object)<em>缩放</em>视野展示所有经纬度,这个...this.mapCtx.includePoints(this.data.positions) 至此小程序就会根据所有<em>标记</em>点的经纬度采用合理的<em>缩放</em>比例把全部的点展示在有限的<em>地图</em>空间上了 这个步骤的话目前我是没有遇到特别坑的地方

    2K21

    News | Google地图加入可高度定制化的进阶图标

    Google地图平台添加可让开发者更改样式的进阶图标,甚至能以CSS动态配置进阶图标,提供动态图标体验 Google地图平台透过让用户使用可高度定制化的进阶图标(Advanced Markers),...Google地图上经典的红色图钉图示,现在可供开发人员自定义,藉由进阶图标的PinView新类别,可以利用程序码更改预设的颜色、背景、图标和轮廓。...Google也让开发者可以直接使用SVG和PNG图片创建自定义图标,并且运用CSS动态配置进阶图标的样式和动画,像是更改大小、透明度、位置和颜色,借此在地图中创建动态图标体验。...官方提到,进阶图标的载入速度,要比传统图标更快,并且支援更快的平移和缩放功能。...即使是大量的进阶图标标记,现在Google地图也能够快速载入,另外,Google也进行了许多辅助功能改进,使开发者可以轻易地针对屏幕阅读器或是键盘终端用户创建产品,终端用户可以完全利用键盘选取以及拖放图标

    1.5K20

    10种免费的工具让你快速的、高效的使用数据可视化

    本文还尝试使用除流行工具(Tableau Public、Powerbi和Google Charts)之外的其他工具,这些工具其实在数据科学生态系统很常用。...处理 只需从Excel或Google表格复制您的数据即可。您还可以上传CSV文件或链接到URL以获取实时更新图表。只需单击一下,即可从多种图表和地图类型中进自定义和注释图表以使其更有效。...可以使用Palladio创建四种类型的可视化: 地图视图:将坐标数据转换为地图上的点 图表视图:允许您可视化数据的任何两个维度之间的关系 列表视图:可以安排数据的维度以制作自定义列表 图库视图:数据可以在网格设置显示...地图不会被标记,旗帜,等高线或不断增长的斑点混乱。 此外,使用myheatmap创建的热图是完全交互式的,具有平移和缩放功能。 处理 用户只需要以CSV格式上传地理数据。...然后,可以将生成的链接嵌入到媒体或在期望时间线的任何网站上。该网站有一个很好的介绍性视频,以开始使用Timeline JS。 演示 如何在中型博客/网站呈现时间轴的示例。

    3K20

    【Go 语言社区】HTML5 Geolocation(地理定位)-转

    如果getCurrentPosition()运行成功,则向参数showPosition规定的函数返回一个coordinates对象 showPosition() 函数获得并显示经度和纬度 上面的例子是一个非常基础的地理定位脚本...如需在地图中显示结果,您需要访问可使用经纬度的地图服务,比如谷歌地图或百度地图: 实例 function showPosition(position) { var latlon=position.coords.latitude...sensor=false"; document.getElementById("mapholder").innerHTML=""; } 尝试一下 » 在上例,...我们使用返回的经纬度数据在谷歌地图中显示位置(使用静态图像)。...Google地图脚本 上面的链接向您演示如何使用脚本来显示带有标记缩放和拖曳选项的交互式地图。 ---- 给定位置的信息 本页演示的是如何在地图上显示用户的位置。

    2.5K110

    腾讯位置服务Flutter业务实践——地图SDK Flutter插件实现(一)

    为减少开发者同时开发Android和iOS应用的成本,提升开发效率,降低集成地图SDK的门槛,腾讯位置服务团队也计划于业务实践基于原生地图SDK能力封装一套地图Flutter插件,支持Flutter开发者跨平台调用地图...地图Flutter插件依赖配置项 Android端的Flutter插件配置项与官网关于Android地图SDK的配置说明类似,需要配置android目录下的两个文件:build.gradle、AndroidManifest.xml...因此,在Flutter插件开发,MethodChannel与EventChannel是两个不可避免用到的类。...用比较通俗的语言来解释这两个类的功能: MethodChannel的作用是传递方法调用,例如在flutter端调用native端的方法或native端调用flutter端的方法。.../services/platfo 根据控制台的输出信息,经过查阅相关资料后找到了原因:该问题由Flutter版本升级导致的重大更改引起的:https://groups.google.com/g/flutter-announce

    4.3K61

    Android开发技能图谱

    扩展阅读 深入理解Java的ConcurrentHashMap:原理与实践 Kotlin协程:理解主要概念 1.2 Android Studio Android Studio是Google官方推荐的...,以及如何在主线程更新UI。...你需要熟悉一些常见的设计模式,单例模式、工厂模式、观察者模式等,并了解如何在Android开发应用它们。...扩展阅读 遵循SOLID原则:构建高内聚低耦合的代码 Java编程规范及最佳实践 四、跨平台开发框架 4.1 Flutter FlutterGoogle推出的一个开源的UI开发框架,可以用于构建跨平台的...你需要了解这些服务的基本功能和使用方法,例如如何使用云数据库存储和查询数据,如何使用云函数处理服务器端逻辑,以及如何使用API获取各种在线服务(地图、社交、支付等)。

    9410

    为什么flutter可以跨平台

    ,一切皆widget 再往下就是渲染层,用于基于widget树生成渲染树,还有底层的基础层,这块在实际开发,很少直接打交道 flutter用一个跨平台的开发语言Dart来开发UI层,然后核心功能,用C...层 跟原生交互,也需要各个原生各自适配,比如这次团队开发的地图的POI搜索,由于使用的高德官方的flutter地图插件,不支持POI搜索,就需要flutter用methodChannel发起一个方法调用...,ios跟Android接受这个方法,各自集成原生的地图SDK,然后通过原生的SDK调用POI功能,再把结果返回给flutter 渲染原生的UI 整个flutter的框架,其实是一个独立的整体,跟原生是独立的...,那有些功能,原生已经有成熟的实现了,flutter为了避免重复实现一套,希望可以直接用原生的UI展示在flutter上面 flutter为了解决这个问题,使用两个特定的widget来实现 (AndroidView...由于flutter的框架设计的很完善,大多数开发,基本都是跟widget打交道,不需要涉及底层和平台特性;不过实际开发,还是会碰到不少不同平台的特性问题,这个是另外一个话题了,再次有空继续展开...

    2.6K20

    Google Earth Engine (GEE) ——Earth Engine Explorer (EE Explorer)使用最全解析(8000字长文)

    本教程将介绍 EE Explorer 应用程序的使用,包括: 如何在数据目录查找数据 向工作区添加数据 界面功能说明 如何定制数据可视化 本教程的目标是让您能够使用 EE Explorer,激发您发现和查看新数据...作为导航 Google 地图界面的提醒,以下几点提供了一些基础知识。 平移: 右键或左键单击 + 按住 + 拖动。 缩放: 按钮:使用 [+] 和 [-] 按钮放大和缩小。...平移和缩放地图以了解控件。 尽可能放大您选择的位置以查看数据集的最大分辨率。...您将看到显示的 Google 地图地形视图。 再次单击可见性按钮(眼睛图标)使数据图层再次在地图上可见。 请注意,某些数据集只能以特定缩放级别显示。...单波段显示对于查看单个连续变量(海拔、植被指数( NDVI)或降水量)非常有用。

    29210

    ​人工智能是如何改变Google地图的?

    城市或城镇中没有标记的区域呢? 谷歌地图遇到了一个问题,就是用户抱怨没有标志的区域方向不明。谷歌地图在这方面取得了进展,应用机器学习来手动检测建筑编号。...苹果正在其IOS应用程序上开发苹果地图,并对谷歌地图构成竞争,因为两个平台都在寻求提高用户参与度。...Keyhole 有关收购Keyhole的消息定义了谷歌地图使用卫星图像为用户提供精确地图的策略。来自Keyhole的数据库信息通过增强地图上的缩放功能使Google地图工作得更好。...位置缩放使查看变得容易,用户由于导航需要而喜欢此功能。 随着Keyhole的收购,谷歌地图从传统的网络转向图像搜索。用户喜欢实时图像,因为来自#AI和机器学习工具的更好的搜索体验。...谷歌地图的报告功能将改变不同用户的贡献度,建筑工地、路线关闭和前方事故。交通堵塞,这些事件不会再次带来挑战,因为用户将使用地图发布更新的拥挤路线。

    2.2K20
    领券