如何在Flutter中使用google_map_flutter显示仿地图插画？

根据你的需求，提供两种常用实现方案，对应不同的插画使用场景：

场景1：单张固定范围的插画（适合小区域） #

如果你的插画是对应某块固定经纬度范围的完整图片，用GroundOverlay就能快速实现：

1. 把插画放入项目assets目录，在pubspec.yaml中配置资源：

assets:
  - assets/custom_map.jpg

2. 在Google Map组件中添加GroundOverlay，指定图片和对应的经纬度边界：

GoogleMap(
  initialCameraPosition: CameraPosition(
    target: LatLng(37.7749, -122.4194), // 插画的中心坐标
    zoom: 12, // 匹配插画的缩放级别
  ),
  mapType: MapType.none, // 隐藏默认Google Map底图
  overlays: {
    GroundOverlay(
      groundOverlayId: const GroundOverlayId('custom-map'),
      image: BitmapDescriptor.fromAssetImage(
        const ImageConfiguration(),
        'assets/custom_map.jpg',
      ),
      bounds: LatLngBounds(
        southwest: const LatLng(37.70, -122.50), // 插画西南角坐标
        northeast: const LatLng(37.85, -122.35), // 插画东北角坐标
      ),
      transparency: 0, // 完全不透明覆盖
    ),
  },
)

场景2：瓦片式自定义插画（支持缩放/大区域） #

如果你的插画是分块的标准地图瓦片（256×256像素，按缩放级别、x/y坐标命名），用TileOverlay加载：

1. 准备瓦片资源：按规范整理瓦片文件，本地assets结构示例：

assets/tiles/
  z10/
    x1234/y5678.png
    ...
  z11/
    ...

2. 自定义TileProvider读取本地瓦片：

class LocalTileProvider extends TileProvider {
  @override
  Future<Tile> getTile(int x, int y, int? zoom) async {
    // 根据你的瓦片命名规则拼接路径
    final tilePath = 'assets/tiles/z$zoom/x$x/y$y.png';
    final bytes = await rootBundle.load(tilePath);
    return Tile(256, 256, bytes.buffer.asUint8List());
  }
}

3. 在Google Map中添加TileOverlay：

GoogleMap(
  initialCameraPosition: CameraPosition(
    target: LatLng(37.7749, -122.4194),
    zoom: 10,
  ),
  mapType: MapType.none,
  tileOverlays: {
    TileOverlay(
      tileOverlayId: const TileOverlayId('custom-tiles'),
      tileProvider: LocalTileProvider(),
    ),
  },
)

核心注意事项 #

• 经纬度边界必须和插画实际覆盖的区域精准匹配，否则会出现偏移或拉伸；
• 如果瓦片存储在服务器，直接使用NetworkTileProvider，传入瓦片URL模板即可，例如：

  NetworkTileProvider(
    urlTemplate: 'https://your-server.com/tiles/z/{z}/x/{x}/y/{y}.png',
  )
  

• 测试时调整initialCameraPosition的zoom值，确保和插画的适配级别一致。

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