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

如何在Flutter中在Google地图上绘制多边形,并将所有POI放在其中?

在Flutter中,可以使用google_maps_flutter插件来在Google地图上绘制多边形并将POI(兴趣点)放在其中。

首先,确保已经在项目的pubspec.yaml文件中添加了google_maps_flutter插件的依赖。

代码语言:txt
复制
dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.0.10

然后,在需要使用Google地图的页面中导入google_maps_flutter插件。

代码语言:txt
复制
import 'package:google_maps_flutter/google_maps_flutter.dart';

接下来,创建一个Google地图的Widget,并在其中添加一个GoogleMap控件。

代码语言:txt
复制
GoogleMap(
  initialCameraPosition: CameraPosition(
    target: LatLng(37.42796133580664, -122.085749655962),
    zoom: 14,
  ),
  onMapCreated: (GoogleMapController controller) {
    // 在地图创建后的回调中,可以进行一些初始化操作
    // 比如添加多边形和POI
    _addPolygon(controller);
    _addPOIs(controller);
  },
),

在onMapCreated回调中,可以调用GoogleMapController的方法来添加多边形和POI。

首先,创建一个多边形的坐标点列表。

代码语言:txt
复制
List<LatLng> polygonPoints = [
  LatLng(37.43296265331129, -122.08832357078792),
  LatLng(37.43006265331129, -122.08832357078792),
  LatLng(37.43006265331129, -122.08332357078792),
  LatLng(37.43296265331129, -122.08332357078792),
];

然后,使用GoogleMapController的addPolygon方法来添加多边形。

代码语言:txt
复制
void _addPolygon(GoogleMapController controller) {
  controller.addPolygon(
    Polygon(
      polygonId: PolygonId('polygon'),
      points: polygonPoints,
      fillColor: Colors.blue.withOpacity(0.5),
      strokeColor: Colors.blue,
      strokeWidth: 2,
    ),
  );
}

接下来,可以使用Marker来添加POI。

代码语言:txt
复制
void _addPOIs(GoogleMapController controller) {
  List<Marker> markers = [
    Marker(
      markerId: MarkerId('poi1'),
      position: LatLng(37.43196265331129, -122.08632357078792),
      infoWindow: InfoWindow(title: 'POI 1'),
    ),
    Marker(
      markerId: MarkerId('poi2'),
      position: LatLng(37.43196265331129, -122.08532357078792),
      infoWindow: InfoWindow(title: 'POI 2'),
    ),
    // 添加更多的POI
  ];

  controller.addMarkers(markers);
}

以上代码会在Google地图上绘制一个蓝色的多边形,并在多边形内添加两个POI。

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

相关·内容

百度地图电子围栏功能的实现

本篇内容实现的过程中将会解决如下几个问题: (1)实现百度地图鼠标绘制多边形功能; (2)实现根据给定的坐标绘制多边形的功能; (3)判断某个坐标点是否绘制的区域内; (4)绘制的坐标点如何在数据库中保存...1.2 获取绘制多边形个个顶点的坐标   我们画出多边形的最终目的其实都是一样的,想把这个区域的坐标信息保存到数据库,然后下次能够根据这个区域的坐标信息,把这个区域显示图上。...这里的添加鼠标绘制工具监听时间,用于获取绘制结果,实际上就是在这里把多边形的顶点放入overlays这个对象,那么我们如何获取这些点的坐标呢,还是从官方文档里找答案,看下面: 1>刚才的JavaScript...2.已知经纬度坐标,绘制多边形 接下来看一下已知一些坐标点如何绘制一个多边形代码增加一个按钮 “绘制多边形” ,然后定义一个有坐标信息的数组: 代码如下: <input type="button...,这里我用的<em>多边形</em>是上一步<em>绘制</em>的<em>多边形</em>,所以测试时,先点击 “<em>绘制</em><em>多边形</em>” ,然后再输入坐标,再点击 “判断是否<em>在</em><em>多边形</em>内”。

3.4K40

追加POI搜索之多边形面范围内搜索及操作模板整理

于是,补上POI搜索可能更为刚需的多边形面范围内搜索功能搜索,同时为了让操作更友好,特意花时间整理了地理数据掘宝系列的模板文件,按着模板填数,连文档都不用细看,都可正确操作到位。...背景介绍 在过往Excel催化剂开发好的POI搜索,只有POI兴趣点关键字搜索和坐标点周边半径搜索,就差了指定多边形面的搜索,因为用户没法轻松完成面坐标的采集,所以也难以Excel催化剂给出其对应的功能...当有了LSV这个专业的地球软件后,我们在其中画出一个自己想要的面,将变得容易许多,虽然其生成的数据结果不能直接使用,但Excel催化剂已经地图数据包制作的相关功能,完成了kml/json/Excel...同样,我们如果有自定义地图,可以轻松实现批量搜索对比不同区块下的POI分布,而不止于一次只处理一个面数据。例如我们之前的东莞镇区地图。甚至可以截选自己感兴趣的部分轮廓线单元。 ?...例如我们镇区的麦当劳数量分布,有地址、有经纬度,甚至可以重新图上描点作可视化分析。 ? 使用方法 功能菜单新增如下: ?

1.1K20
  • Python地理可视化入门【使用Folium图上展示数据】

    其中,Folium是一个基于Leaflet.js的Python库,能够轻松创建交互式地图。本文中,我们将介绍如何使用Folium库图上展示数据,为您提供Python地理可视化的入门。...地图上绘制形状除了添加标记点和展示数据,Folium还支持图上绘制各种形状,多边形、圆形等。...运行以上代码,您将得到一个名为shapes.html的HTML文件,打开它,您将看到一个包含了多边形和圆形的地图。添加图例地图中添加图例可以帮助观众更好地理解地图上展示的数据或形状的含义。...总结在本文中,我们介绍了如何使用Python的Folium库进行地理可视化。通过Folium,我们可以轻松创建交互式地图,并在地图上展示数据、绘制形状、添加图例和文本标签等。...图上添加文本标签:文本标签是地图可视化的常用元素之一,可以用于向观众提供额外的信息或解释。Folium允许图上添加文本标签,并灵活控制其样式和位置。

    46810

    为什么flutter可以跨平台

    ,一切皆widget 再往下就是渲染层,用于基于widget树生成渲染树,还有底层的基础层,这块实际开发,很少直接打交道 flutter用一个跨平台的开发语言Dart来开发UI层,然后核心功能,用C...engine层,有个很重要的部分就是图形渲染,所有的widget最终的目的,都是为了绘制屏幕上,这块的底层实现就是依靠Skia,Skia也是开源库,同时也兼容了多个平台,可以看下skiaWikipedia...上描述,基本兼容各主流的平台了 github上,可以看到skia的源码:https://github.com/google/skia,大多数是C跟C++ 所有flutter UI层的代码,都是dart...的方法,可以方便的实现跟原生交互,包括调用原生的方法,接口返回结果等 可以看到MethodChannel的核心实现是engine层 跟原生交互,也需要各个原生各自适配,比如这次团队开发的地图的POI...SDK调用POI功能,再把结果返回给flutter 渲染原生的UI 整个flutter的框架,其实是一个独立的整体,跟原生是独立的,那有些功能,原生已经有成熟的实现了,flutter为了避免重复实现一套

    2.6K20

    打造基于GitHub的O2O应用:超炫的地图交互

    这就意味着两件事: 地图离线 多边形搜索 1图离线 首先,我们要知道GeoJSON是怎样的一个存在。...换句话来说,根据这个文件里面的多边形,我们可以绘制出中国地图。由于上面的点是真实的地理位置信息,所以无论我们怎样的缩放这些点的位置都不会发生变化。...在线地图一直都是一个缓慢的存在,并且Google Map多数人那都是不可用的。 接着问题来了,我们并没有把每个用户的数据存入到数据库,那么我们怎么才能实现搜索?...这样实现的前提是: 要有一个支持多边形搜索的搜索引擎,ElasticSearch、Solr、MongoDB等等。 要将用户的数据成功存成GEO信息。...从地图上跳转到对应的省的时候: 用Aajx请求获取这个省的GeoJSON文件 获取这个市的中心位置,并对其进行缩放 将上面的每个市绘制到地图上 在这个过程遇到的最大的坑是:中国有北京、上海、天津、

    1.4K60

    学废了系列 - WebGIS vs WebGL图形编程

    地图的业务场景还有一个非常典型的功能:POI检索。比如以某个点为中心指定半径的圆形区域内检索特定类型的POI。或者图上自定义指定几个点,然后以这些点为顶点的不规则图形内进行POI检索。...比如指定步行最长距离是5公里,起点在中关村科贸大厦,按照以下步骤进行: 首先以科贸大厦为圆心,5公里为半径,检索圆形区域内的所有指定类型的POI,得到一个list; 然后依次以list的每个POI为终点...回到 WebGIS 领域,我们看到的电子地图是由一个个不规则的多边形(Polygon)和线(Line)组成,三角剖分算法的作用就是把这些多边形分割成一个个三角形,然后才能够被 WebGL 绘制出来。...其实线也是多边形,因为 WebGL 1.0 不支持宽于1像素的线,所以宽线必须以多边形的形式绘制。 ? ?...而矢量地图则不然,前文提到,矢量地图实际上就是让WebGL干了OpenGL的活,不单是绘图,绘图过程的任何事情都变成了前端的事情,POI冲突检测就是其中一项。 先看下面这张图: ?

    1.9K20

    硬核万字长文:我是如何把Skia的体积“缩小”到18的?

    鸟瞰渲染器全貌 时至今日 Google 甚至微软的诸多产品都采用 Skia 作为核心渲染组件。包括但是不限于 Android、Chrome、Flutter、Xamarin 等等。...几何只需要 2 个端点的坐标就可以描述一条线,从数学的角度看线是没有宽度的。如果我们需要绘制一条有宽度的线就需要把线转化成面(或者是一个矩形)。...回想一下绘制折线的过程需要对折线的子线段进行法线平移,相当于扩大了线段描述的区域。那么扩大了区域的同时难免会出现多边形区域重叠。而渲染器执行渲染前需要对多边形进行堆叠的剔除。  ...就像 Android 父 View 限定子 View 的绘制不能超过父亲指定的区域一样。  硬件提供的裁剪 几乎所有的显卡都提供了 scissor 的能力。...然后把区域绘制到掩码图上,在后续的绘制过程要逐像素采样掩码图来判断要不要剔除。

    2.2K10

    Google Earth Engine(GEE)——GEE最全介绍(7000字长文)初学者福音!

    脚本 选项卡上查看示例脚本或保存您自己的脚本。使用检查器选项卡查询放置图上的对象。 使用 Google Visualization API显示和绘制数字结果。...运行代码编辑器只需要一个网络浏览器(使用Google Chrome以获得最佳效果)和互联网连接。以下部分更详细描述了地球引擎代码编辑器的元素。...Writer 的存储库 文件夹是其所有者已授予您写入权限的存储库。您可以向Writer文件夹的存储库添加新脚本、修改其中的现有脚本或更改对存储库的访问权限(您不得删除其所有者)。...对于绘制点,使用地标图标 ,对于绘制线,使用线图标,对于绘制多边形,使用多边形图标 ,对于绘制矩形,使用矩形图标 。...(请注意,矩形是平面几何图形,因此它们不能放置具有测地线几何图形(线和多边形)的图层上。)

    1.7K11

    【译】Flutter架构综述

    Flutter的核心是Flutter引擎,它主要用C++编写,支持所有Flutter应用所需的基元。每当需要绘制新的帧时,该引擎负责对合成场景进行光栅化。...Flutter本身广泛使用InheritedWidget作为共享状态框架的一部分,例如应用程序的视觉主题,其中包括颜色和类型样式等属性,这些属性整个应用程序是普遍存在的。...所有这些都会增加大量的开销,特别是UI和应用逻辑之间有大量交互的地方。 相比之下,Flutter最大限度减少了这些抽象,绕过系统UI小部件库而使用自己的小部件集。...例如,他们可能只是将他们想要渲染的东西放在中心位置,并将其限制规定的约束范围内)。) 父母可以规定孩子的宽度,但给孩子高度上的灵活性(或规定高度但提供灵活的宽度)。...因此,一般来说,这种方法最适合像Google地图这样的复杂控件,Flutter重新实现并不实用。 通常情况下,Flutter应用会根据平台测试build()方法实例化这些小部件。

    5.6K10

    地图SDK全面升级 – 数十项新功能及优化等你来体验

    通过调用该接口,开发者可以自己的应用中加入地图相关的功能(地图展示、标注、绘制图形等),轻松访问腾讯地图服务和数据,构建功能丰富、交互性强、符合各种行业场景的地图类应用程序。...如故宫旅游类场景,可以将展示的地图限制故宫景区的范围内。...用户通过传入这些自定义的瓦片覆盖物图上,可以打造更多、更丰富的个性化地图应用场景。...采用更加精细化的3D展现形式代替传统的“多边形盒子”。其中室内空间分隔综合了盒子、墙体、模型、镂空、平面多种表达方式,并优化了扶梯的显示策略。欢迎开发者合作接入,详情可查看室内位置服务解决方案。 ?...您在使用遇到任何问题,都可以随时向我们反馈: 1、腾讯位置服务官网提交工单,系统会将您的问题分配给专业的技术支持进行解答。

    1.2K20

    【FlutterUnit周边】历时两年 FlutterUnit 2.0 版本到来

    前面很长一段时间主要 业余时间 会把精力放在小册上, 现在第五本布局小册已经完成,本周三将会上架。FlutterUnit 也会随着我对 Flutter 框架的深入研究而不断完善和进步。...关于所有的 lints 规范,可以 https://dart-lang.github.io/linter/lints/index.html 中进行查看: ---- 3、应用内更新 进入应用时会通过服务端接口检查最新版本...所以我 flutter_unit_tool 写了一个小工具类,应用打包完成后,只要修改版本号,就可以自动上传文件以及更新数据库应用信息的事情。...其中目前以及收录了不少案例,以至于外甥女老是喜欢拿我的手机玩绘制集录,今后也会不断收录一些新鲜有趣的东西给她玩。...image.png image.png 比如在这可以和小伙伴来一局 井字棋 的小对战,或者查看 动画曲线 的散点图效果: image.png image.png ---- 或者体验一下从圆取正多边形的方式

    45230

    Flutter 自定义 View 介绍

    几乎所有的UI系统都会提供一个自绘UI的接口,这个接口通常会提供一块2D画布Canvas,Canvas内部封装了 一些基本绘制的API,开发者可以通过Canvas绘制各种自定义图形。...Flutter,提供了一个CustomPaint Widget, 它可以结合一个画笔CustomPainter来实现绘制自定义图形。...可以看到,绘制时我们需要提供前景或者背景画笔,两者也可以同时提供, 我们的画笔需要继承 CustomPainter 类,我们画笔类实现真正的绘制逻辑。...注意 一般child属性我们一般不填,即使你是想要在你的CustomPaint上添加一些其他的布局,也不建议放在child属。 size尺寸最好给定,计算一下布局的宽高,设定一下。...Paint,就如画画一样,你用什么笔就能画什么样的画,Paint, 我们可以配置画笔的各种属性粗细、颜色、样式等。

    1.1K20

    详谈R语言构建地理投影系统绘制高端地图

    投影系统用来确定如何在平面上把地球表面的地理空间信息进行投影,以便更好展示和分析数据。...该函数接受两个参数:tomato_world:这是一个地理空间数据框架,包含了某些地理空间数据(例如地图上的点、线或多边形)。 crs参数,用来指定目标投影系统。...这意味着我们会在纬度为 90、-90 和 90 的位置绘制经纬线。 longs 包含了 180、-180 和 180 三组经度值。...由于每一组经度值都有 181 个,因此实际上会在经度为 180、-180 和 180 的位置绘制经纬线。通过这些纬度和经度值,可以图上绘制经纬线。...例如,我们可以把每一对纬度和经度值看作一个点,并将这些点连接起来,从而得到一组经纬线。

    1.8K20

    您的位置信息如何被利用?——基于位置信息的应用和地理信息匹配算法

    描述了借助iPhone手机的定位功能,记录了您的所有行踪。 ? 一、大数据时代的挖掘技术 首先,大数据时代包括四个领域:数据科学、网络科学、空间地理科学和可视化技术。...您不同意,滴滴打车没法用,大众点评找不到,代驾无法定位,这个位置信息误差不超过15米;及时您不提供位置,或许后台也记录了您的位置轨迹。...看到了,其实只要我们拥有你的位置信息,就可以计算出落在不同区域内的人或人数 当然如果能够实时进行计算,一些重大公共安全事件,移动或相关拥有位置数据的机构就可以实时计算特定区域的人流量、进出流量比等指标...落实到来自google、百度或腾讯的街景地图上 五、应用场景 智慧足迹(Smart Steps),通过获得完全匿名或针对性的某个个体的网络聚合位置数据,可对某个时段、某个地点的人流量的关键影响因素进行分析...,并将结果实时可视化和推送给企业或管理决策部门。

    1K30

    Java 操作 Office:POI之word图片处理

    三 Graphics 3.1 简介 java.awt.Graphics是一个抽象类,根据源码的文档描述, Graphics类是所有图形上下文的抽象基类,允许应用程序绘制各种设备上实现的组件以及屏幕外图像上...3.2 矩形绘制 图片中绘制一个矩形,来代表框选区域,通过配合颜色选择(红橙黄),可以起到标示作用。...Graphics绘制矩形的方法: public void drawRect(int x, int y, int width, int height) 3.3 多边形绘制 矩形只有四个点,...显示可能需要绘制复杂的多边形,那么上述方法就无法满足了。...这个方法会绘制由 nPoint 个线段定义的多边形其中前 nPoint - 1 个线段是 1 ≤ i ≤ 时从 (xPoints[i - 1], yPoints[i - 1]) 到 (xPoints[

    1.7K30

    Qt编写地图综合应用8-地图交互

    一、前言 最常用的地图交互就几个,比如鼠标图上按下的时候可以拾取经纬度坐标,然后传给Qt程序,再比如对设置的设备点进行单击的时候,通知Qt程序单击了哪一个设备点,好让Qt程序识别并作出反应比如弹出对应点的详细信息或者视频预览等...webkit要实现从网页传回数据交互,只需要在网页载入完毕的信号loadFinished中注入类对象即可 webView->page()->mainFrame()->addToJavaScriptWindowObject...,都能自动转换的,这样的话就一个类涵盖了所有的各种可能的情况,都可以通过type来区分,通过data的类型去判断并转换数据。...可显示点线面工具,可直接在地图上划线、点、矩形、圆形等。 可设置行政区划,指定某个城市区域绘制图层,在线地图自动输出行政区划边界点集合到js文件给离线地图使用。 可静态或者动态添加多个覆盖物。...支持点、折线、多边形、矩形、圆形、弧线、点聚合等。 函数接口友好和统一,使用简单方便,就一个类。 支持js动态交互添加点、删除点、清空点、重置点,不需要刷新页面。

    1.4K01

    百度地图API开发指南(二)

    // 自定义控件必须实现initialize方法,并且将控件的DOM元素返回    // 本方法创建个div元素作为控件的容器,并将其添加到地图容器  ZoomControl.prototype.initialize...标注、矢量图形元素(包括:折线和多边形和圆)、信息窗口等。覆盖物拥有自己的地理坐标,当您拖动或缩放地图时,它们会相应的移动。...Label:表示地图上的文本标注,您可以自定义标注的文本内容。 Polyline:表示地图上的折线。 Polygon:表示地图上多边形多边形类似于闭合的折线,另外您也可以为其添加填充颜色。...// 当标注显示图上时,其所指向的地理位置距离图标左上    // 角各偏移10像素和25像素。您可以看到本例该位置即是    // 图标中央下端的尖角位置。 ...它包含一组点,并将这些点连接起来形成折线。 添加折线 折线图上绘制为一系列直线段。可以自定义这些线段的颜色、粗细和透明度。

    1.7K30

    带你快速掌握Flutter的视图(Widgets)

    谁是FlutterView? Android,View是屏幕上显示的所有内容的基础, 按钮、工具栏、输入框等一切都是View。 iOS ,构建 UI 的过程中将大量使用 view 对象。...Flutter,您可以使用Widgets库的核心布局小部件 Container, Column, Row, 和 Center,关于Widget的更多内容可参考:Layout Widgets目录...另外推荐大家widget catalog查看 Flutter提供的布局。 如何在布局添加或删除组件?...要了解如何在Flutter实现签名Painter,可参阅CollinStackOverflow上的答案。 ?...以下示例显示如何使用CustomPaint widget绘制阶段绘制。 它实现了抽象类CustomPainter,并将其传递给CustomPaint的painter属性。

    11K10

    WebWorker 文本标注的应用

    作者:潘与其 - 蚂蚁金服前端工程师 - 喜欢图形学、可视化 之前数据瓦片方案的介绍,我们提到过希望将瓦片裁剪放入 WebWorker 中进行,以保证主线程中用户流畅的地图交互(缩放、平移、旋转)。...但是本文介绍的针对 Polygon 要素的文本标注方案,将涉及复杂的多边形难抵极运算,如果不放在 WebWorker 运算将完全卡死无法交互。...基于网格的 PIA 算法 算法步骤如下: 以多边形的包围盒作为初始网格,使用 ray casting 计算网格中心到多边形边界的有向距离(下图的 dist 负数表示形外)。...多边形的环 分类涉及到多边形的有向面积计算,正数代表顺时针方向的 exterior ring,而负数代表逆时针方向的 interior ring: // mapbox/utils/classify_rings.js...因此 Mapbox 的做法是合并多条请求,主线程维护一个简单的状态机: /** * While processing `loadData`, we coalesce all further

    4.7K60
    领券