如何在我的谷歌地图上开始绘图？答案

【问题标题】：How can I initiate drawing on my Google Map?如何在我的谷歌地图上开始绘图？
【发布时间】：2020-08-18 23:07:37
【问题描述】：

我找到了这个库：https://pub.dev/packages/flutter_map_picker

我查看了他的代码并试图弄清楚他是如何开始绘图的。他完成的事情比我需要的要复杂得多，我无法弄清楚他做了什么的第一步。我也不想拿那个家伙的代码。谁能解释一下如何做到这一点？

我只想能够在我的地图上圈出对象。似乎有一个折线解决方案，但它只是坐标列表中的直线，而不是我正在寻找的。p>

【问题讨论】：

使用栈可能是？？？
我需要将绘图添加到我的地图中。不只是在我目前的观点之上。我的地图已经叠好了。除非堆栈在这里有其他含义，否则我认为这行不通。
这可以单独使用flutter和map来实现，我不知道他在做什么，但是flutter google map可以将本地小部件坐标转换为真实世界坐标，我用它放了一个标记在用户触摸的地图上，绘制只涉及多个触摸点！！
我为面包屑实现了类似的功能：一个计时器每 3 秒丢弃 1 个标记。知道如何冻结地图并允许 onpressed-> drop 许多标记事件吗？我认为这可能是滞后的......

标签： flutter google-maps dart

【解决方案1】：

带有 GoogleMap 和 CustomPaint 的 Stack 小部件可让您在地图上绘制任何您想要的东西。

Stack(
    children: <Widget>[
      _position == null
          ? Text('Waiting for location . .')
          : GoogleMap(
              liteModeEnabled: false,
              compassEnabled: true,
              mapType: MapType.hybrid,
              markers: Set<Marker>.of(markers.values),
              initialCameraPosition: CameraPosition(
                target: LatLng(_position.latitude, _position.longitude),
                zoom: 17,
                tilt: 0,
              ),
              onMapCreated: (GoogleMapController controller) {
                _mapController = controller;
                // trigger initial update and paint of landmarks
                _updateLandmarks();
              },
              onCameraMove: (CameraPosition position) {
                _updateLandmarks();
              },
            ),
      CustomPaint(
        foregroundPainter: MapPainter(_landmarksMap),
      ),
    ],
  )

您必须将地图坐标转换为设备屏幕坐标。谷歌有一本关于如何做到这一点的食谱，除了它在 Flutter 中不起作用，因为地图插件没有公开完整的 API。但当然有办法做到这一点。

    void _updateLandmarks() async {

  double dpi = MediaQuery.of(context).devicePixelRatio;
  LatLngBounds bounds = await _mapController.getVisibleRegion();
  ScreenCoordinate topRight = await _mapController.getScreenCoordinate(bounds.northeast);
  ScreenCoordinate bottomLeft = await _mapController.getScreenCoordinate(bounds.southwest);

  _landmarksMap.values.forEach((element) async {
    ScreenCoordinate sc = await _mapController.getScreenCoordinate(LatLng(element.pos.latitude, element.pos.longitude));
    element.screenPoint.x = ((sc.x - bottomLeft.x) / dpi).floor();
    element.screenPoint.y = ((sc.y - topRight.y) / dpi).floor();
  });

  setState(() {});
}

您可以在此处阅读更多详细信息：https://aperico.com/google-maps-with-custom-paint-in-flutter/

【讨论】：