Flutter：如何使用新的标记API将标记添加到Google Maps？

Question

    mapController.addMarker(
  MarkerOptions(
    position: LatLng(37.4219999, -122.0862462),
  ),
);

我在一篇博客文章中看到了这段代码，现在我想在Google Maps上添加标记。

'GoogleMapController'类中没有定义'addMarker'方法。

我想库已经更改了，我想知道新的做法是什么，我在controller.dart和api参考中查找了，但无法弄清楚。

如果有关于此的教程和博客文章，我将很高兴看到，欢迎分享。

- mirkancal

Answer 1

是的，谷歌地图API已经发生了变化，标记API现在是基于小部件而不是控制器。

来自CHANGELOG.md。

“重大变化。将标记API更改为基于小部件，它原来是基于控制器的。还更改了示例应用程序以解决同样的问题。”

我从github应用程序示例中复制了一些代码片段，我认为这对您很重要。

Map<MarkerId, Marker> markers = <MarkerId, Marker>{}; // CLASS MEMBER, MAP OF MARKS

void _add() {
    var markerIdVal = MyWayToGenerateId();
    final MarkerId markerId = MarkerId(markerIdVal);

    // creating a new MARKER
    final Marker marker = Marker(
      markerId: markerId,
      position: LatLng(
        center.latitude + sin(_markerIdCounter * pi / 6.0) / 20.0,
        center.longitude + cos(_markerIdCounter * pi / 6.0) / 20.0,
      ),
      infoWindow: InfoWindow(title: markerIdVal, snippet: '*'),
      onTap: () {
        _onMarkerTapped(markerId);
      },
    );

    setState(() {
      // adding a new marker to map
      markers[markerId] = marker;
    });
}

GoogleMap(
              onMapCreated: _onMapCreated,
              initialCameraPosition: const CameraPosition(
                target: LatLng(-33.852, 151.211),
                zoom: 11.0,
              ),
              // TODO(iskakaushik): Remove this when collection literals makes it to stable.
              // https://github.com/flutter/flutter/issues/28312
              // ignore: prefer_collection_literals
              markers: Set<Marker>.of(markers.values), // YOUR MARKS IN MAP
)

我建议你在这里查看示例应用here。已更新到新API。

- Marcos Boaventura

---

这些链接已经被移动到 https://github.com/flutter/plugins/blob/master/packages/google_maps_flutter/google_maps_flutter/example/lib/place_marker.dart - Friedrick

非常感谢 @A.S.H - Marcos Boaventura

你在哪里调用 _add() 函数？如果我想在 initState() 中装饰我的 markers 列表，应该怎么做？ - JOSEPH Blessingh

我想在Flutter地图Web中添加标记。 - Dipak Ramoliya

Answer 2

我从谷歌 codelabs 上学习了以下示例。

Map<MarkerId, Marker> markers = <MarkerId, Marker>{};
LatLng _center =  LatLng(9.669111, 80.014007);

在 onMap 创建时添加一个单个静态标记

void _onMapCreated(GoogleMapController controller) {
    mapController = controller;

    final marker = Marker(
      markerId: MarkerId('place_name'),
      position: LatLng(9.669111, 80.014007),
      // icon: BitmapDescriptor.,
      infoWindow: InfoWindow(
        title: 'title',
        snippet: 'address',
      ),
    );

    setState(() {
      markers[MarkerId('place_name')] = marker;
    });
  }

谷歌地图小部件：

GoogleMap(
                onMapCreated: _onMapCreated,
                initialCameraPosition: CameraPosition(
                  target: _center,
                  zoom: 14.0,
                ),
                markers: markers.values.toSet(),
              ),

- yathavan

Answer 3

这是您的解决方案。

所以，这是下面提到的源代码的输出：View

源代码：

class MapScreen extends StatefulWidget {
  const MapScreen({super.key});

  @override
  State<MapScreen> createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  bool visibility = false;

  Map<MarkerId, Marker> markers = <MarkerId, Marker>{};

  static const CameraPosition _kGooglePlex = CameraPosition(
    target: LatLng(37.42796133580664, -122.085749655962),
    zoom: 14.4746,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: Icon(visibility ? Icons.visibility_off : Icons.visibility),
        onPressed: () {
          visibility = !visibility;
          _add();
          setState(() {});
        },
      ),
      body: SafeArea(
        child: GoogleMap(
          initialCameraPosition: _kGooglePlex,
          markers: markers.values.toSet(),
        ),
      ),
    );
  }

  void _add() {
    const marker1 = Marker(
      markerId: MarkerId('place_name1'),
      position: LatLng(37.42796133580664, -122.085749655962),
    );
    const marker2 = Marker(
      markerId: MarkerId('place_name2'),
      position: LatLng(37.422131, -122.084801),
    );
    if (visibility) {
      markers[const MarkerId('place_name1')] = marker1;
      markers[const MarkerId('place_name2')] = marker2;
    } else {
      var blankMarker = const Marker(markerId: MarkerId(""));
      markers[const MarkerId('place_name1')] = blankMarker;
      markers[const MarkerId('place_name2')] = blankMarker;
    }
    return;
  }
}

- Dharam Budh

---

它与接受的答案有何不同？您介意解释代码而不是发送视频吗？ - mirkancal

在_add()函数中，你可以看到这个条件。所以，当有可见性的时候，我们将实际值赋给标记，并且在else部分，我们将实际值解除赋值，或者可以说我们用虚假值重新赋值。 - Dharam Budh

谢谢你的解释。听起来你是通过替换为空白标记来切换标记，但我觉得这与问题无关，也不能解决任何问题。这个问题在4年前就已经解决了，当时用户告诉我更新日志和添加标记的新方法。 - mirkancal