Flutter - 如何删除单个 google_maps_flutter ^0.5.21 标记？

Posted 2023-02-23

【中文标题】Flutter - 如何删除单个 google_maps_flutter ^0.5.21 标记？

【英文标题】：Flutter - How to remove an individual google_maps_flutter ^0.5.21 marker?

【发布时间】：2020-01-15 06:00:41

【问题描述】：

自google_maps_flutter 成立以来发生了相当大的变化，这意味着删除单个标记的过程也发生了变化。

我在这个问题的旧查询中发现，removing markers on version ~ 0.0.1，是这样的：

mapController.markers.forEach((marker)
  mapController.removeMarker(marker);
);

这对我不起作用，因为我收到了错误：

The getter 'markers' isn't defined for the class 'GoogleMapController'.

和

The method 'removeMarker' isn't defined for the class 'GoogleMapController'.

这是我用来添加标记的：

void _addMarker(LatLng latlang, String title) 

var _width = MediaQuery.of(context).size.width;
var _height = MediaQuery.of(context).size.height;

double _topHeight = 55;

if (_height == 896.0 && _width == 414.0) 
  _topHeight = 83;
 else if (_height == 812.0 && _width == 375.0) 
  _topHeight = 78;


double mapsettingsHeight = 225;

if (_topHeight == 55)
  mapsettingsHeight = 225;
 else 
  mapsettingsHeight = 255;


if (_markers.contains(title)) 
  print("error");
 else 
  setState(() 
    _markers.add(Marker(
      markerId: MarkerId(title),
      position: latlang,
      infoWindow: InfoWindow(
        title: title,
        snippet: title,
        onTap: () 
          showCupertinoModalPopup(
            context: context,
            builder: (BuildContext context) 
              return Material(
                child: Container(
                  width: _width,
                  height: mapsettingsHeight,
                  decoration: BoxDecoration(
                    color: Color(0xFFF9F9F9).withAlpha(200),
                    borderRadius: BorderRadius.only(topLeft:Radius.circular(10),topRight:Radius.circular(10))
                  ),
                  child: Column(
                    children: <Widget>[
                      Container(
                        width: _width,
                        height: 40,
                        padding: EdgeInsets.all(10),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: <Widget>[
                            Container(
                              height: 20,
                              alignment: Alignment.center,
                              child: Text(title,style:TextStyle(fontFamily:'Helvetica',fontSize:15,color:Colors.black,fontWeight:FontWeight.w600))
                            ),
                            GestureDetector(
                              child: Container(
                                width: 50,
                                height: 50,
                                alignment: Alignment.topRight,
                                child: Icon(Icons.keyboard_arrow_down,size:25,color:Colors.black.withAlpha(100)),
                              ),
                              onTap: () 
                                Navigator.pop(context);
                              
                            )
                          ],
                        ),
                      ),
                      _customDivider(),
                      Divider(height:10,color:Colors.transparent),
                      Container(
                        width: _width,
                        height: 12.5,
                        padding: EdgeInsets.only(left:10,right:10),
                        child: GestureDetector(
                          child: Text("Edit Marker",style: TextStyle(fontFamily:'Helvetica',fontSize:12.5,color:Colors.blue,fontWeight:FontWeight.w400)),
                          onTap: () 
                            showDialog(
                              context: context,
                              builder: (BuildContext context) 
                                return AlertDialog(
                                  title: TextField(
                                    controller: _locationMarkerTitle,
                                    decoration: InputDecoration(
                                      hintText: 'Name this location',
                                      hintStyle: TextStyle(fontFamily:'Helvetica',fontSize:15,color:Colors.black,fontWeight:FontWeight.w200),
                                    ),
                                  ),
                                  titlePadding: EdgeInsets.all(10),
                                  content: Row(
                                    mainAxisAlignment: MainAxisAlignment.end,
                                    children: <Widget>[
                                      GestureDetector(
                                        child: Text("Submit (this doesn't work!)",style: TextStyle(fontFamily:'Helvetica',fontSize:15,color:Colors.blue,fontWeight:FontWeight.w200)),
                                        onTap: () 
                                          _addMarker(LatLng(_position.latitude,_position.longitude),_locationMarkerTitle.text);
                                          Navigator.pop(context);
                                        
                                      ),
                                    ],
                                  )
                                );
                              
                            );
                          
                        ),
                      ),
                      Divider(height:10,color:Colors.transparent),
                      Container(
                        width: _width,
                        height: 12.5,
                        padding: EdgeInsets.only(left:10,right:10),
                        child: GestureDetector(
                          child: Text("Remove Marker",style: TextStyle(fontFamily:'Helvetica',fontSize:12.5,color:Colors.blue,fontWeight:FontWeight.w400)),
                          onTap: () 
                            setState(() 
                              //where the solution go
                            );
                          
                        ),
                      ),
                    ],
                  ),
                ),
              );
            
          );
        
      ),
      icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueAzure),
    ));
  );

【参考方案1】：

我假设在您的 build() 函数中的某处您有 Google 地图小部件：

GoogleMap(
  markers: _markers,
  ...

您只需从_markers 列表中删除单个Marker 并调用setState，以便使用更新的标记列表重建GoogleMap 小部件。

编辑 - 更具体地针对作者的用例：

MarkerIds 唯一标识一个 Marker，因此您可以使用它们来查找要删除的 Marker：

_markers.remove(_markers.firstWhere((Marker marker) => marker.markerId.value == title));

或

_markers.remove(_markers.firstWhere((Marker marker) => marker.markerId == MarkerId(title)));

【讨论】：

我之前尝试过类似 _markers.remove(MarkerId(“$title”)) 但没有得到任何结果。对不起，如果那个代码是错误的，我是 afk

我猜你的意思是_markers.remove(Marker(markerId: MarkerId("$title"))？这将不起作用，因为您正在创建一个新的 Marker 对象，而不是引用您首先添加到列表中的同一 Marker 对象。如果您查看 Marker 对象的 bool operator ==(Object other) 的定义，您会发现在检查 2 个 Marker 对象是否被视为相等时，会考虑 Marker 的所有其他属性，这就是为什么您的方法不会工作，因为您试图删除列表中不存在的标记。

您能否在答案中添加一个完整的示例？我不在atm所以自己无法解决。

抱歉，您花了一段时间才回复您，您提供的答案非常有效。非常感谢！