使用flutter_map+MapBox时出现No host specified in URI报错求助

问题描述 #

使用flutter_map包和MapBox开发Android地图应用，原本尝试矢量瓦片后改用栅格瓦片，此前地图可正常显示且URL有效。代码迁移到其他文件整理后（曾成功运行一次），地图突然显示空白，报错Invalid argument(s): No host specified in URL。多次核对MapBox样式URL无误，但粘贴到Chrome中也无法访问，更换之前成功使用的样式问题依旧。

排查与解决方案 #

1. 修正MapBox栅格瓦片URL格式 #

MapBox的栅格瓦片URL需要明确指定瓦片尺寸参数，你的代码中设置了tileSize: 512，但URL中缺少/512这一关键部分，导致请求地址无效，这是核心问题。

正确的MapBox栅格瓦片URL格式为：

https://api.mapbox.com/styles/v1/{username}/{style_id}/tiles/{tileSize}/{z}/{x}/{y}?access_token={access_token}

修改后的URL应包含/512：

https://api.mapbox.com/styles/v1/ihebm/clmly80au01ts01qucmxh0meq/tiles/512/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaWhlYm0iLCJhIjoiY2xtbHhuOHY2MGowcTJzczd5NTFzOTFpNyJ9.1CIj8NONC6vfgGiNrJoHIw

2. 验证URL有效性 #

将修改后的URL中的{z}/{x}/{y}替换为具体数值（例如10/345/678），在Chrome中打开测试，如果能显示瓦片图片，说明URL格式正确。

3. 排查代码中的隐藏字符 #

迁移代码时可能引入空格、换行或不可见字符，导致URL解析失败。可以将URL复制到纯文本编辑器（如记事本）中清理后，再重新粘贴回代码。

4. 确认MapBox令牌权限 #

登录MapBox账户，进入「Access Tokens」页面，检查你的访问令牌是否启用了瓦片服务权限。若权限受限，生成一个新的全权限测试令牌进行测试。

修改后的完整代码示例 #

FlutterMap(
  options: MapOptions( 
    center: LatLng.LatLng(24.266906,45.107849),
    zoom: 4.8,
    adaptiveBoundaries: false,
  ),
  children: [ 
    TileLayer(
      urlTemplate: 'https://api.mapbox.com/styles/v1/ihebm/clmly80au01ts01qucmxh0meq/tiles/512/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaWhlYm0iLCJhIjoiY2xtbHhuOHY2MGowcTJzczd5NTFzOTFpNyJ9.1CIj8NONC6vfgGiNrJoHIw',
      tileSize: 512,
    ),
  ],
),

内容的提问来源于stack exchange，提问作者Heba Al-Amoudi