Question

如何为Google Maps Marker（google_maps_flutter）的点击事件添加自定义处理程序？我只能看到consumeTapEvents实际上并没有任何功能，而只是布尔。我曾考虑过使用GestureDetector，但似乎不太正确。

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

谢谢

Answer 1

随着版本^ 0.3.0 + 1的发布，引入了一个新的Marker API，该API将标记作为小部件处理（包括onTap（）方法）。这样，Google Map就有一个markers:选项，可以接受Marker对象的列表。每个元素都可以这样定义：

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!
  }

),

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

Answer 2

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

void _onMarkerTapped(Marker marker) {
...
}

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

Answer 3

请记住，当前版本是开发人员预览，版本为0.0.3。请花点时间让事情开始工作！

Answer 4

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

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);
}

Answer 5

您可以做类似

的操作

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

其中_mapController是GoogleMapController的实例:)

Answer 6

您可以使用地图插件中的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,
  ));
});
}

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

6 个答案: