如何使用google_maps_flutter处理谷歌添加的地图标记点击事件？

google_maps_flutter 官方插件并没有直接提供监听谷歌自带POI标记（比如餐馆、商店这类官方添加的标记）点击事件的API，不过可以通过以下两种方式实现需求：

方法一：监听地图点击+反向地理编码判断POI #

通过监听地图的全局点击事件，获取点击坐标后调用地理编码服务查询该位置的POI信息，以此判断是否点击到官方标记并处理逻辑：

GoogleMap(
  initialCameraPosition: CameraPosition(target: LatLng(37.7749, -122.4194), zoom: 15),
  onTap: (LatLng position) async {
    // 调用地理编码服务查询该位置的POI详情
    // 实际需接入Google Maps Geocoding API，需配置API密钥
    final poiInfo = await fetchPoiInfoFromGeocoding(position);
    if (poiInfo != null) {
      // 处理官方POI标记的点击逻辑，比如弹出详情
      print("点击了官方POI：${poiInfo.name}");
    }
  },
)

注意：使用Google Maps Geocoding API需注意调用配额和相关费用。

方法二：通过平台通道调用原生代码扩展 #

直接在Android/iOS原生层监听POI点击事件，再通过平台通道将事件传递到Flutter端：

Android端原生代码示例 #

在你的MainActivity中配置地图的POI点击监听：

class MainActivity : FlutterActivity() {
    private lateinit var mapView: MapView
    private val CHANNEL = "com.example.poi_click"

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler { call, result ->
            // 处理Flutter端调用逻辑
        }
    }

    // 初始化地图时设置POI点击监听
    private fun setupMap() {
        mapView.getMapAsync { googleMap ->
            googleMap.setOnPoiClickListener { poi ->
                // 将POI信息通过通道传递给Flutter
                MethodChannel(flutterEngine?.dartExecutor?.binaryMessenger, CHANNEL).invokeMethod(
                    "onPoiClicked",
                    mapOf(
                        "name" to poi.name,
                        "lat" to poi.latLng.latitude,
                        "lng" to poi.latLng.longitude
                    )
                )
            }
        }
    }
}

iOS端原生代码示例 #

在你的AppDelegate或对应ViewController中配置：

import UIKit
import Flutter
import GoogleMaps

class AppDelegate: FlutterAppDelegate {
    private let CHANNEL = "com.example.poi_click"

    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        let controller : FlutterViewController = window?.rootViewController as! FlutterViewController
        let channel = FlutterMethodChannel(name: CHANNEL, binaryMessenger: controller.binaryMessenger)
        
        // 初始化GMSMapView并设置POI点击代理
        let mapView = GMSMapView(frame: CGRect.zero)
        mapView.poiClickDelegate = self
        
        GeneratedPluginRegistrant.register(with: self)
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
}

extension AppDelegate: GMSMapViewPOIClickDelegate {
    func mapView(_ mapView: GMSMapView, didTapPOIWithPlaceID placeID: String, name: String, location: CLLocationCoordinate2D) {
        let channel = FlutterMethodChannel(name: CHANNEL, binaryMessenger: window?.rootViewController as! FlutterViewController)
        channel.invokeMethod("onPoiClicked", arguments: [
            "name": name,
            "lat": location.latitude,
            "lng": location.longitude,
            "placeId": placeID
        ])
    }
}

Flutter端接收事件 #

class _MyHomePageState extends State<MyHomePage> {
  static const platform = MethodChannel('com.example.poi_click');

  @override
  void initState() {
    super.initState();
    platform.setMethodCallHandler((call) async {
      if (call.method == 'onPoiClicked') {
        final poiData = call.arguments as Map<String, dynamic>;
        // 处理原生传递过来的POI点击事件
        print("官方POI被点击：${poiData['name']}");
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        initialCameraPosition: CameraPosition(target: LatLng(37.7749, -122.4194), zoom: 15),
      ),
    );
  }
}

注意事项 #

• 方法一的地理编码方式存在一定误差，可能无法精准匹配点击的POI；
• 方法二的原生扩展方式更精准，但需要维护多端代码，适配不同系统版本；
• 使用Google Maps相关API均需配置有效的API密钥，并遵守Google的服务条款。

内容的提问来源于stack exchange，提问作者porton