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

Question

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

google-mapsflutterflutter-layout

28

我正在开发Flutter项目，需要在Google地图上的当前位置绘制一个圆圈。有人有想法吗？

我想在Flutter中实现以下效果：

提前感谢。

- Hardik1344

有画那个圆的原因吗？是为了表示当前位置的误差/精度（这是流行的地图/导航应用程序的当前设计）吗？ - TruongSinh

我希望在我的当前位置周围设置不同颜色的半径。 - Hardik1344

我是说在你当前位置周围设置半径的任何理由吗？这是为了指示不同的半径（1英里，5英里），还是仅出于美观原因等等？ - TruongSinh

无论我分配什么半径，这仅仅是为了美观。所有特定位置都应该在所选圆形半径上显示，例如餐厅、医院等等。 - Hardik1344

6个回答

12

如果你使用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
            )
        )
    ],
),)

- Thanooshan

谢谢您，我的问题是从哪里可以找到访问令牌？ - Hardik1344

1

@Hardik1344 你必须使用Mapbox地图才能使用此插件。 Mapbox地图与Google地图类似。在创建Mapbox帐户后，您将获得访问令牌。与Google地图不同，Mapbox不需要开通计费账户即可获取访问令牌。 - Thanooshan

@Thanooshan，我该如何在FlutterMap库中使用MapBox绘制路由？ - Taleb

@Taleb 试试这个插件并看看。https://pub.dev/packages/flutter_mapbox_navigation - Thanooshan

5

你可以使用 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),
    ),],),

- nitin sathvara

感谢您的帮助。对于类似iOS外观的效果，请使用strokeColor: Colors.blue.shade100.withOpacity(1.0)，strokeWidth: 1。 - Shadros

2

一种实现这一目标的方法是更改标记的图标

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

在安卓/iOS上设置适当的权限后，在谷歌地图选项中设置 trackCameraPosition: true 和 myLocationEnabled: true，然后您可以通过以下代码在当前位置添加您的图像。

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

这是一篇精彩的文章，介绍了使用Google Maps for Flutter（开发者预览版）插件可能的所有功能。请查看文章

- a0x2

谢谢，让我检查一下你的答案和文章。 - Hardik1344

1

在https://github.com/flutter/plugins/pull/1136上有一个已打开的拉取请求，其中包含此功能。

但是，由于提交者的许可证存在问题，Google团队尚未接受它。我不知道这是否会被合并。有很多拉取请求被接受，但没有集成。

- isaacfi

-1

请注意，Google Maps小部件是开发者预览版，版本为0.2。在未来几个月中，许多事情和功能可能会发生变化。

- Randal Schwartz

4

我认为这个“答案”更像是一条评论，而不是一个答案。 - TruongSinh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alfred Jingle · Accepted Answer

现在，此功能可在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,
  );