如何通过onTap点击在自定义图片上添加并保存标记？

一、替换为自定义地图背景 #

用Stack组件把自定义图片作为底层背景，上层叠加透明交互层来捕获点击事件：

Stack(
  children: [
    // 自定义地图图片，需提前在pubspec.yaml配置资源
    Image.asset(
      'assets/custom_map.png',
      key: _imageKey, // 用于获取图片渲染尺寸
      fit: BoxFit.contain,
      width: double.infinity,
      height: double.infinity,
    ),
    // 透明交互层，处理点击
    GestureDetector(
      onTapDown: (TapDownDetails details) {
        _handleMapTap(details.localPosition);
      },
      child: Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.transparent,
      ),
    ),
    // 渲染所有标记
    ..._markers.map((marker) => Positioned(
          left: marker.dx - 15, // 偏移量让标记中心对准点击点
          top: marker.dy - 30,
          child: Image.asset(
            'assets/custom_marker.png', // 自定义标记图片
            width: 30,
            height: 30,
          ),
        )).toList(),
  ],
)

二、点击添加标记并保存位置 #

在State类中维护标记坐标列表，点击时计算相对图片的坐标并保存：

List<Offset> _markers = [];
final GlobalKey _imageKey = GlobalKey();

void _handleMapTap(Offset screenPosition) {
  // 获取图片的渲染尺寸和屏幕位置
  final RenderBox imageBox = _imageKey.currentContext!.findRenderObject() as RenderBox;
  final Size imageSize = imageBox.size;
  final Offset imageScreenOffset = imageBox.localToGlobal(Offset.zero);
  
  // 计算点击位置相对于图片本身的坐标
  final Offset relativePosition = Offset(
    screenPosition.dx - imageScreenOffset.dx,
    screenPosition.dy - imageScreenOffset.dy,
  );
  
  // 更新标记列表
  setState(() {
    _markers.add(relativePosition);
  });
  
  // 保存坐标到本地或后端（示例用SharedPreferences）
  // SharedPreferences prefs = await SharedPreferences.getInstance();
  // prefs.setStringList('markers', _markers.map((m) => '${m.dx},${m.dy}').toList());
}

三、解决自定义标记不显示的问题 #

1. 检查资源配置：确保pubspec.yaml中已正确声明图片资源：

flutter:
  assets:
    - assets/custom_map.png
    - assets/custom_marker.png

2. 验证路径：确认图片文件确实在assets文件夹下，文件名和代码中引用的完全一致（区分大小写）。
3. 调整渲染尺寸：如果标记太小或超出范围，修改Image.asset的width/height参数，或调整Positioned的偏移值。

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