如何在Flutter中实现自定义地图 点击房屋区块弹出对话框

你可以根据你的资源情况选择以下两种主流实现方案：

方案1：基于SVG地图实现（有现成SVG地图资源时推荐） #

这个方案开发成本最低，适合已经有SVG格式的园区/小区地图的场景：

• 第一步：将你的地图导出为SVG格式，每个橙色房屋区块对应单独的<path>标签，给每个path设置唯一的id，和你存储的房屋信息一一绑定
• 第二步：在pubspec.yaml中添加flutter_svg依赖，注意版本适配你当前使用的Flutter版本
• 第三步：加载SVG资源时，解析所有path节点并存储每个路径对应的坐标范围，点击时通过Path.contains(Offset)方法判断点击位置落在哪个房屋路径内
• 第四步：匹配到对应房屋后调用showDialog弹出对应的信息弹窗即可

示例核心代码片段：

// 导入flutter_svg后加载SVG资源，配合点击检测
GestureDetector(
  onTapUp: (details) {
    Offset tapPos = details.localPosition;
    // 遍历所有预解析的房屋路径，判断点击归属
    for (var house in housePathList) {
      if (house.path.contains(tapPos)) {
        showDialog(
          context: context,
          builder: (context) => AlertDialog(
            title: Text("房屋编号：${house.houseId}"),
            content: Text(house.houseDetail),
          ),
        );
        break;
      }
    }
  },
  child: SvgPicture.asset(
    "assets/community_map.svg",
    fit: BoxFit.contain,
  ),
)

方案2：基于CustomPaint自定义绘制实现（需要高度定制时推荐） #

如果没有现成SVG资源，或者需要对绘制逻辑做高度自定义，可以用自定义绘制的方案：

• 第一步：提前采集所有房屋区块的顶点坐标，每个房屋对应一个Path对象，同时绑定对应的房屋业务数据
• 第二步：自定义继承自CustomPainter的绘制类，遍历所有房屋Path绘制到画布上，设置橙色填充、黑色边框等样式
• 第三步：在CustomPaint外层包裹GestureDetector监听点击事件，获取点击的本地坐标后倒序遍历所有房屋Path，匹配点击归属的房屋
• 第四步：匹配成功后弹出对应房屋的信息弹窗

示例核心代码片段：

// 房屋路径+数据模型
class HouseItem {
  final String houseId;
  final String houseInfo;
  final Path path;
  HouseItem({required this.houseId, required this.houseInfo, required this.path});
}

// 自定义地图绘制类
class CustomMapPainter extends CustomPainter {
  final List<HouseItem> houseList;
  CustomMapPainter(this.houseList);

  @override
  void paint(Canvas canvas, Size size) {
    final fillPaint = Paint()..color = Colors.orange;
    final strokePaint = Paint()
      ..color = Colors.black
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1.2;
    for (var house in houseList) {
      canvas.drawPath(house.path, fillPaint);
      canvas.drawPath(house.path, strokePaint);
    }
  }

  @override
  bool shouldRepaint(covariant CustomMapPainter oldDelegate) {
    return oldDelegate.houseList != houseList;
  }
}

// 页面使用示例
GestureDetector(
  onTapUp: (details) {
    final tapOffset = details.localPosition;
    // 倒序遍历避免上层房屋被遮挡误判
    for (var house in houseList.reversed) {
      if (house.path.contains(tapOffset)) {
        showDialog(
          context: context,
          builder: (context) => AlertDialog(
            title: Text("房屋${house.houseId}信息"),
            content: Text(house.houseInfo),
            actions: [
              TextButton(onPressed: () => Navigator.pop(context), child: const Text("关闭"))
            ],
          ),
        );
        break;
      }
    }
  },
  child: CustomPaint(
    painter: CustomMapPainter(houseList),
    size: Size.infinite,
  ),
)

注意事项：

1. 如果需要支持地图缩放平移，可以将组件放到InteractiveViewer中，点击坐标需要根据当前缩放比例、偏移量做对应换算，避免点击位置偏移
2. 所有房屋路径的坐标需要做屏幕适配，根据实际绘制的宽高等比例换算，保证不同尺寸设备上点击位置都准确
3. 如果房屋区块面积很小容易误触，可以给Path添加小幅膨胀处理，放大点击热区提升交互体验

内容的提问来源于stack exchange，提问作者Inder Pal Singh