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

gxwragnw  于 2023-06-19  发布在  Flutter
关注(0)|答案(7)|浏览(151)

如何为Google Maps Marker(google_maps_flutter)的点击事件添加自定义处理程序?我只能看到consumeTapEvents,它实际上没有接受任何函数,只有bool。我想使用GestureDetector,但似乎不太正确。
处理GoogleMap标记事件的标准方法是什么?我正在尝试点击后导航到新页面。
谢谢

ev7lccsx

ev7lccsx1#

随着版本^0.3.0+1的发布,引入了一个新的标记器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!
  }

),

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

pdkcd3nj

pdkcd3nj2#

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

esyap4oy3#

请记住,当前版本是0.0.3版本的开发人员预览版。请给它一点时间让事情运转起来!

ajsxfq5m

ajsxfq5m4#

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

void _onMarkerTapped(Marker marker) {
...
}

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

cxfofazt5#

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

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

olmpazwi6#

我使用flutter_map包,我尝试了这个,它与我一起工作。

addmarker(LatLng postion, String urlimg, String id) {
  marker.add(Marker(
    point: postion,
    height: 60,
    width: 60,
    builder: (context) {
      return InkWell(
        onTap: () {
          globals.iduserProfile = id;
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => const profileuser(),
            )
          );
        },
        child: CachedNetworkImage(
          imageUrl: urlimg,
          imageBuilder: (context, imageProvider) {
            return CircleAvatar(
              radius: 30,
              backgroundColor: Colors.greenAccent,
              child: CircleAvatar(
                radius: 27,
                backgroundImage: imageProvider,
              )
            );
          },
        ),
      );
    },
  ));
  return marker;
}
fae0ux8s

fae0ux8s7#

你可以这样做

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

其中_mapControllerGoogleMapController的一个instance:)

相关问题