Flutter Web集成Mapbox报错“Unsupported operation: -infinity”求助

核心问题定位 #

你代码中使用的FlutterMap组件属于flutter_map库，但你声明依赖的是mapbox_gl库，两者是完全独立的地图实现，组件不兼容，这是触发错误的主要原因；另外，未给地图组件设置明确尺寸，也会导致布局计算时出现无限值错误。

具体解决方向 #

1. 匹配正确的库与组件 #

方案A：改用mapbox_gl的官方组件

替换代码中的FlutterMap为mapbox_gl提供的MapboxMap，示例代码：

class _MapTabState extends State<MapTab> {
  @override
  Widget build(BuildContext context) {
    return Container(
      // 必须设置明确高度
      height: MediaQuery.of(context).size.height,
      child: MapboxMap(
        accessToken: 'pk.eyJ1IjoiamF6aWx6YWltMzIiLCJhIjoiY2w3NTg3Z3IyMXA4cDNubXE0N2Rsdm5jaCJ9.oOhMWI2U3gJf3-Jszw-5NA',
        initialCameraPosition: CameraPosition(
          target: LatLng(51.5, -0.09),
          zoom: 9.2,
        ),
        styleString: 'mapbox://styles/mapbox/mapbox-bathymetry-v2',
      ),
    );
  }
}

方案B：继续使用flutter_map加载Mapbox瓦片

修正TileLayer的配置，使用Mapbox的合法瓦片地址，并给地图设置尺寸：

class _MapTabState extends State<MapTab> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          // 用Expanded让地图占满剩余空间，或设置固定height
          Expanded(
            child: FlutterMap(
              options: MapOptions(
                center: latlng.LatLng(51.5, -0.09),
                zoom: 9.2,
              ),
              children: [
                TileLayer(
                  urlTemplate: 'https://api.mapbox.com/styles/v1/mapbox/mapbox-bathymetry-v2/tiles/{z}/{x}/{y}?access_token={accessToken}',
                  additionalOptions: {
                    'accessToken': 'pk.eyJ1IjoiamF6aWx6YWltMzIiLCJhIjoiY2w3NTg3Z3IyMXA4cDNubXE0N2Rsdm5jaCJ9.oOhMWI2U3gJf3-Jszw-5NA',
                  },
                ),
              ],
              nonRotatedChildren: [
                RichAttributionWidget(
                  attributions: [
                    TextSourceAttribution(
                      'Mapbox contributors',
                      onTap: () => launchUrl(Uri.parse('https://www.mapbox.com/about/maps/')),
                    ),
                  ],
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

2. 修复布局尺寸问题 #

无论用哪个库，地图组件必须有明确的尺寸约束：

• 给外层Container设置height属性
• 用Expanded包裹地图组件，让它在Column中占据剩余空间
• 避免直接在无尺寸约束的容器中渲染地图

3. 清理依赖冲突 #

检查pubspec.yaml，只保留你实际使用的地图库：

• 如果用mapbox_gl，移除flutter_map相关依赖
• 如果用flutter_map，移除mapbox_gl相关依赖

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