如何在颤动中的当前位置创建圆圈答案

【问题标题】：How to create circle on current location in flutter如何在颤动中的当前位置创建圆圈
【发布时间】：2019-06-10 05:10:51
【问题描述】：

我正在做颤振项目。我必须在谷歌地图上的当前位置画一个圆圈。有人知道吗。

我想要这样的颤动

提前致谢。

【问题讨论】：

有什么理由画那个圆圈吗？是否表明当前位置的误差/准确度（这是流行的地图/导航应用程序的当前设计）？
我想用不同的颜色围绕我当前的位置设置半径。
我的意思是有任何理由在您当前位置周围设置半径？是否表示不同的半径（1英里，5英里），是否仅出于审美原因等？
这只是出于审美原因在我选择的半径上分配的任何内容。所有特定位置都应显示给我，如餐厅、医院等在选定的圆半径上。

标签： google-maps flutter flutter-layout

【解决方案1】：

现在 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,
  );

【讨论】：

感谢您的努力，我会检查并恢复
这个圆的半径的测量单位是什么？是米还是什么？
您发布的链接无效...还有您是如何获得圈子 ID 的。需要一个详细的答案！！！
@AliYarKhan final circleId = CircleId('circle_id_${DateTime.now().millisecondsSinceEpoch}');我正在使用这个。

【解决方案2】：

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

【讨论】：

谢谢你，我的问题是从哪里可以找到访问令牌？
@Hardik1344 您必须使用Mapbox map 才能使用此插件。 Mapbox 地图也类似于谷歌地图。在 Mapbox 中创建帐户后，您将获得一个访问令牌。与 Google 地图不同，Mapbox 不需要计费帐户获取访问令牌。
@Thanooshan 如何使用带有 FlutterMap 库的 MapBox 绘制路由？
@Taleb 试试这个插件看看。 pub.dev/packages/flutter_mapbox_navigation

【解决方案3】：

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

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

在android/ios上设置适当的权限后，在谷歌地图选项上设置trackCameraPosition: true和myLocationEnabled: true，然后你可以通过以下代码将你的图片添加到当前位置

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

这是一篇很棒的文章，它解释了您可以使用 Google Maps for Flutter（开发者预览版）插件 article 进行的所有可能操作

【讨论】：

：谢谢，让我看看你的答案和文章。

【解决方案4】：

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

【讨论】：

感谢您的帮助。对于像 ios 这样的外观，将 strokeColor: Colors.blue.shade100.withOpacity(1.0), strokeWidth: 1

【解决方案5】：

https://github.com/flutter/plugins/pull/1136 有一个开放的拉取请求与此功能

但 Google 团队没有接受它，因为提交的许可存在问题。不知道会不会合并接受了很多拉取请求，但没有集成。

【讨论】：

【解决方案6】：

请记住，谷歌地图小部件是 0.2 版的开发者预览版。在接下来的几个月里，许多事情和能力可能会发生变化。

【讨论】：

我认为这个“答案”更像是评论而不是答案。