flutter - 如何使用 flutter_map 从 mapbox 导入 map 样式模板以进行 flutter？

Question

我正在尝试通过 flutter_map 包在我的 flutter 应用程序中添加 map 。我尝试导入此 mapbox 样式: https://api.mapbox.com/styles/v1/tomjohn/cj5yp5pln0cqb2ruhy6w99j91.html?title=true&access_token=pk.eyJ1IjoidG9tam9obiIsImEiOiJxQ2RydWRNIn0.mYKLvmkrBlBKiQZdhNa31A#10.39/55.8548/-4.1836

通过这样做:

FlutterMap(
              options: new MapOptions(
                center: new LatLng(51.5, -0.09),
                zoom: 13.0,
              ),
              layers: [
                new TileLayerOptions(
                  urlTemplate: "https://api.tiles.mapbox.com/v4/"
                      "{id}/{z}/{x}/{y}@2x.png?access_token={accessToken}",
                ),
                new MarkerLayerOptions(
                  markers: [
                    new Marker(
                      width: 80.0,
                      height: 80.0,
                      point: new LatLng(51.5, -0.09),
                      builder: (ctx) =>
                      new Container(
                        child: new FlutterLogo(),
                      ),
                    ),
                  ],
                ),
              ],
            ),

但是它抛出了这个异常:

Exception: Could not instantiate image codec.

Answer 1

要导入 mapbox 瓦片:

在您的 mapbox 样式共享选项中(在开发人员资源下)，选择“第三方”并在下拉按钮中选择“CARTO”。然后您可以复制链接并将其粘贴为 urlTemplate。

之后，添加:

TileLayerOptions(
                  urlTemplate:<PASTE_URL_HERE>,
                  additionalOptions: {
                    'accessToken': <YOUR_ACCESS_TOKEN>,
                    'id': 'mapbox.mapbox-streets-v8'
                  }),