如何在Flutter中使用flutter_map导入来自Mapbox的地图样式模板？

Question

我想在我的Flutter应用程序中添加一个地图，通过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(),
                      ),
                    ),
                  ],
                ),
              ],
            ),

但它抛出了以下异常：

异常：无法实例化图像编解码器。

- Ramesh Dalvi

---

您提供的代码无法加载您所提到的样式。您想要实现什么？加载一个带有您提到的样式的Mapbox地图，还是添加另一个TileLayer？ - Moritz

我们能在flutter_map包中添加Google Maps API吗？ - Arslan Kaleem

Answer 1

导入 Mapbox 切片：

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

之后，添加以下内容：

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

- carlos dugeass

Answer 2

MapboxMap(
     styleString: "*****",
     myLocationEnabled: true,
     rotateGesturesEnabled: false,
     scrollGesturesEnabled: false,
     tiltGesturesEnabled: false,
     onMapCreated: (MapboxMapController controller){
        _controller = controller;
     },
     initialCameraPosition: CameraPosition(
       target: LatLng(***,***), zoom: 15),
     ),

- Amir Khaledian