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

Posted 2023-03-28

【中文标题】Flutter：如何使用新的 Marker API 向 Google Maps 添加标记？

【英文标题】：Flutter: How to add marker to Google Maps with new Marker API?

【发布时间】：2019-07-26 18:10:27

【问题描述】：

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

我在blog post 中看到了这段代码 sn-p，我正在尝试向 Google 地图添加标记。

没有为类“GoogleMapController”定义方法“addMarker”。

我认为图书馆已经改变，我想知道这样做的新方法是什么，我在 controller.dart 和 api reference 中查找但无法弄清楚。

我很高兴看到一些关于它的教程和博客文章，不要犹豫分享。

【参考方案1】：

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

CHANGELOG.md

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

我从github app example复制了一些我认为对你很重要的代码

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。

【讨论】：

这些链接已移至github.com/flutter/plugins/blob/master/packages/…

非常感谢@A.S.H

你在哪里调用_add()？如果我想在 initState 中填充我的标记列表怎么办？

我想在flutter map web中添加标记

【参考方案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(),
              ),