首页
学习
活动
专区
工具
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。

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

相关·内容

  • 高德地图——标记「建议收藏」

    标记显示地图上的单一位置。它可以使用一个标准的图标,也可以由开发 者自定义图标。您可以通过 AMap.addMarker(MarkerOptions Options) 方 法将一个标记添加到地图上。 MarkerOptions属性有: • position(Required) 在地图上标记位置的经纬度值。 参数不能为空。 • title 当用户点击标记,在信息窗口上显示的字符串(测试发现,点击没有任何效果)。 • snippet 附加文本,显示在标题下方(测试发现,点击没有任何效果)。 • draggable 如果您允许用户可以自由移动标记,设置为“true ” ,默认情况下为“false ” 。 • visible 设置“false ” ,标记不可见。 • anchor图标摆放在地图上的基准点。 • perspective设置 true,标记有近大远小效果。 • 可以通过Marker.setRotateAngle() 方法设置标记的 旋转角度,从正北开始,逆时针计算。

    01

    Android开发笔记(一百零三)地图与定位SDK

    国内常用的地图SDK就是百度和高德了,二者的用法大同小异,可按照官网上的开发指南一步步来。下面是我在集成地图SDK时遇到的问题说明: 1、点击基本地图功能选项,不能打开地图,弹出“key验证出错!请在AndroidManifest.xml文件中检查key设置的”的红色字提示。查看日志提示“galaxy lib host missing meta-data,make sure you know the right way to integrate galaxy” 该问题是因为key值对应的签名与app打包用的签名不一致。app在开发时与发布时有两个不同的签名,开发时用的是ADT默认签名,查看默认签名的SHA1值可依次选择“Window”->“Preferences”->“Android”->“Build  SHA1 fingerprint”。app发布时的签名是密钥文件的签名,查看发布签名的SHA1值可依次选择“File”->“Export”->“Export Android Application”->“Next”后选择密钥文件并输入密码与app输出路径->在“Certificate fingerprints”下查看SHA1值。 2、百度地图SDK3.6及以上版本找不到overlayutil包。 这是因为新版SDK的jar包不再包含这部分源码,得到官方demo的src目录下获取源码加入到开发者自己的工程中,源码路径为:BaiduMap_AndroidMapSDK_v3.7.1_Sample\BaiduMapsApiDemo\src\com\baidu\mapapi 3、在一个工程中同时包含了百度地图和高德地图的sdk,编译时报错“Found duplicate file for APK: assets/lineDashTexture.png”。 这是因为百度和高德的sdk,其jar包存在同名文件“assets/lineDashTexture.png”,所以无法通过编译。即百度sdk与高德sdk是互斥的,不能同时存在于同个工程中,必须分开来使用。

    01

    Qt编写地图综合应用9-行政区划

    行政区划在地图应用中非常有用,行政区划是行政区域划分的简称,是国家为了进行分级管理而实行的区域划分,百度地图提供的内置的函数类支持传入行政区划的名称来获取对应的边界点集合,然后根据该集合来绘制点集合,最后将该点集合封闭连起来,就形成了行政区划的轮廓图了,使用下来发现地图本身提供的函数可以支持到县城,如果需要精确到乡镇那就需要其他办法获得,一种是直接加载事先准备好的乡镇的边界点集合的js文件,一种是在地图上绘制多边形,然后开启可编辑属性,人为的拖动边界,最后获取整个多边形的边界点集合即可,这种方法有个专业术语叫扒数据,在音乐界叫扒带。其实方法一的前提也是按照方法二来获取的,对于很小的应用数量不多的乡镇可以采用此法,如果需要很多省市的乡镇那就可能需要安排专人去获取了。

    00
    领券