Flutter Web中基于google_maps实现地图点击添加及删除标记点

可以实现地图点击添加标记点的功能，核心思路是利用原生Google Maps JavaScript API的点击事件监听——因为google_maps插件本身就是对JS API的封装，所以可以直接给地图实例绑定点击事件，在回调中创建并添加标记点。

修改后的完整代码如下：

import 'dart:ui' as ui;
import 'package:google_maps/google_maps.dart';
import 'package:flutter/material.dart';
import 'dart:html' as html;

Widget getMap() {
  // 唯一ID用于命名div元素
  String htmlId = "6";
  // 创建Web视图
  //ignore: undefined_prefixed_name
  ui.platformViewRegistry.registerViewFactory(htmlId, (int viewId) {
    final latLang = LatLng(18.508682857887514, 73.79985281545117);

    final mapOptions = MapOptions()
      ..zoom = 11
      ..tilt = 90
      ..center = latLang;
    final elem = html.DivElement()
      ..id = htmlId
      ..style.width = "100%"
      ..style.height = "100%"
      ..style.border = "none";

    final map = GMap(elem, mapOptions);
    
    // 初始添加的标记点
    Marker(MarkerOptions()
      ..position = latLang
      ..map = map
      ..title = '初始位置');
    Marker(MarkerOptions()
      ..position = LatLng(18.52362694783254, 73.87910089845153)
      ..map = map
      ..title = '初始位置');
    Marker(MarkerOptions()
      ..position = LatLng(18.6206091576794, 73.91171656176442)
      ..map = map
      ..title = '初始位置');

    // 绑定地图点击事件，添加标记点
    map.onClick.listen((MouseEvent event) {
      if (event.latLng != null) {
        Marker(MarkerOptions()
          ..position = event.latLng!
          ..map = map
          ..title = '点击添加的位置');
      }
    });

    return elem;
  });
  // 创建Flutter Web的平台视图
  return HtmlElementView(
    viewType: htmlId,
  );
}

关键说明： #

• 通过map.onClick.listen监听地图的点击事件，回调参数MouseEvent包含了点击位置的latLng坐标。
• 每次点击时，判断latLng不为空后，直接创建新的Marker实例并关联到当前地图，即可完成点击添加标记点的功能。
• 该方法依赖google_maps插件的原生JS API封装，无需额外插件支持，是当前可行的实现方案。

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