Flutter/Dart 为 Google Maps Marker 添加自定义点击事件

Posted 2023-03-28

【中文标题】Flutter/Dart 为 Google Maps Marker 添加自定义点击事件

【英文标题】：Flutter/Dart Add custom Tap Events for Google Maps Marker

【发布时间】：2019-06-02 17:46:11

【问题描述】：

如何为 Google 地图标记 (google_maps_flutter) 的点击事件添加自定义处理程序？我只能看到consumeTapEvents，它实际上并没有接受任何函数，而只是布尔值。我曾想过使用GestureDetector，但似乎不太正确。

在 Google 地图的标记上处理事件的标准方法是什么？我正在尝试点击后导航到新页面。

谢谢

【参考方案1】：

随着版本 ^0.3.0+1 的发布，引入了新的标记 API，它将标记作为小部件处理（包括 onTap() 方法）。这样，谷歌地图就有一个markers: 选项，它允许一个标记对象列表。每个元素都可以这样定义：

Marker(
  markerId: MarkerId("id"), // a string for marker unique id
  icon: BitmapDescriptor.defaultMarker(), // options for hues and custom imgs
  position: LatLng(lat, long), // lat and long doubles

  onTap: () 
    //this is what you're looking for!
  

),

比以前的控制器方法容易得多！

【讨论】：

我们是否可以访问此VoidCallback 上标记的position？

@mahmoud_eslami 在这种特殊情况下，您正在设置标记（如从数据中获取并在地图上设置），因此您知道位置并设置了它。你指的是什么情况？就像点击地图并获取坐标一样？

【参考方案2】：

您可以使用地图插件中的 onTap 或 onLongPress 选项来监控点击事件。然后你可以通过以下方式在点击的位置添加标记

    final Set<Marker> _markers = ;



 GoogleMap(onMapCreated: _onMapCreated,
        initialCameraPosition: CameraPosition(
          target: _center,
          zoom: 13.0,
        ),
        compassEnabled: true,
        tiltGesturesEnabled: false,
        onTap: (latlang)
          if(_markers.length>=1)
            
              _markers.clear();
            

          _onAddMarkerButtonPressed(latlang);
        ,
        myLocationEnabled: true,
        myLocationButtonEnabled: true,
        mapType: mapType,
        markers: _markers,
        onCameraMove: _onCameraMove,
      ),

_onAddMarkerButtonPressed 函数在哪里

 void _onAddMarkerButtonPressed(LatLng latlang) 
loadAddress(latlang);
_latLng = latlang;
 setState(() 
  _markers.add(Marker(
    // This marker id can be anything that uniquely identifies each marker.
    markerId: MarkerId(_lastMapPosition.toString()),
    position: latlang,
    infoWindow: InfoWindow(
      title: address,
    //  snippet: '5 Star Rating',
    ),
    icon: BitmapDescriptor.defaultMarker,
  ));
);

【参考方案3】：

     void _onMapCreated(GoogleMapController controller)
    this._controller = controller;
    controller.onMarkerTapped.add(_onMarkerTapped);


void _onMarkerTapped(Marker marker) 
...


Widget build(BuildContext context) 
 ... GoogleMap(
        onMapCreated: _onMapCreated,
        options: GoogleMapOptions(
          ...
        ));

【讨论】：

controller.onMarkerTapped.add(_onMarkerTapped); 出于某种原因.. 这不再有效。

【参考方案4】：

请记住，当前版本是 0.0.3 版的开发者预览版。请给它一点时间让事情顺利进行！

【讨论】：

所有商品 :) 所以答案是：还没有。对吗？

如果 API 页面上没有列出，那么它还不存在。

【参考方案5】：

在创建标记时制作自定义对象。

var map = <String, String> ; // custom object

for (int i = 0; i < mCrag.length; i++) 
    controller.addMarker(new MarkerOptions(
       icon: BitmapDescriptor.fromAsset('assets/images/down-arrow.png'),
       position: LatLng(double.parse(mCrag[i].lat), double.parse(mCrag[i].lon)),
    )).then((marker) 
         map[marker.id] = mCrag[i].id; // this will return when tap on marker
         return marker;
    );


// marker click event
void onMarkerTapped(Marker marker) 
   var selectedMarker = map[marker.id];  // here you will get your id.
   debugPrint(selectedMarker);
   getRoutes(selectedMarker);

【参考方案6】：

你可以做类似的事情

_mapController.onMarkerTapped.add((marker) 
      // your code here
    );

其中_mapController 是GoogleMapController 的一个实例：)

【讨论】：

如何在此代码中添加方法..我想选择位置并获取该位置的纬度、经度