如何在Flutter中的当前位置创建圆

svujldwt  于 2023-06-07  发布在  Flutter
关注(0)|答案(6)|浏览(504)

我正在做一个Flutter项目。我必须在谷歌Map上画一个圈。有没有人有想法。

我想要这样的悸动

先谢谢你了。

qc6wkl3g

qc6wkl3g1#

这个功能现在可以在google_maps_flutter包中使用:
https://pub.dev/documentation/google_maps_flutter_platform_interface/latest/google_maps_flutter_platform_interface/Circle-class.html
部分示例:

Set<Circle> circles = Set.from([Circle(
    circleId: CircleId(id),
    center: LatLng(latitude, longitude),
    radius: 4000,
)]);

GoogleMap(
    mapType: MapType.normal,
    myLocationEnabled: true,
    myLocationButtonEnabled: true,
    initialCameraPosition: initialMapLocation,
    onMapCreated: (GoogleMapController controller) {
      _controller.complete(controller);
    },
    onCameraMove: null,
    circles: circles,
  );
ykejflvf

ykejflvf2#

如果你使用flutter_map插件,那么你可以很容易地绘制半径圆。这是密码。

FlutterMap(
    options: MapOptions(
        center: LatLng(latitude, longitude),
        zoom: 16.0
    ),
    layers: [
        TileLayerOptions(
            urlTemplate: "map url",
            additionalOptions:  {
            "accessToken" : "xxx",
            "id" : "map id"
            }
        ), 
        MarkerLayerOptions(
            markers: Marker( //marker
                width: 25.0,
                height: 25.0,
                point: LatLng(latitude, longitude),
                builder: (context) {
                return Container(
                    child: IconButton(
                        icon: Icon(Icons.my_location),
                        iconSize: 25.0,
                        color: Color(0xff9045f7),
                        onPressed: () {
                            print('marker tapped');
                        },
                        ),
                    );
                }
            )
        ),
        CircleLayerOptions(
            circles: CircleMarker( //radius marker
                point: LatLng(latitude, longitude),
                color: Colors.blue.withOpacity(0.3),
                borderStrokeWidth: 3.0,
                borderColor: Colors.blue,
                radius: 100 //radius
            )
        )
    ],
),)
umuewwlo

umuewwlo3#

你可以使用google_maps_flutter插件,代码如下:

circles: Set.from([Circle( circleId: CircleId('currentCircle'),
      center: LatLng(position.latitude,position.longitude),
      radius: 4000,
          fillColor: Colors.blue.shade100.withOpacity(0.5),
          strokeColor:  Colors.blue.shade100.withOpacity(0.1),
    ),],),
3zwjbxry

3zwjbxry4#

一种方法是更改标记的图标

mapController.addMarker(MarkerOptions(
    position: LatLng(37.4219999, -122.0862462),
    icon: BitmapDescriptor.fromAsset('images/circle.png',),
     ),
);

在Android/iOS上设置相应的权限后,在Google Maps选项上设置trackCameraPosition: truemyLocationEnabled: true,之后您可以通过以下代码在当前位置添加您的图像

mapController.addMarker(MarkerOptions(
    position: mapController.cameraPosition.target,
    icon: BitmapDescriptor.fromAsset('images/circle.png',),
    ),
);

这是一篇优秀的文章,它解释了所有可能的事情,你可以做的谷歌Map的Flutter(开发者预览版)插件article

waxmsbnn

waxmsbnn5#

https://github.com/flutter/plugins/pull/1136上有一个具有此功能的开放式拉取请求
但是Google团队没有接受它,因为提交的许可证有问题。我不知道这是否会合并。有很多pull请求被接受,但没有被集成。

yiytaume

yiytaume6#

请记住,google maps widget是一个开发者预览版,版本为0.2。未来几个月,许多事情和能力可能会发生变化。

相关问题