如何使用flutter_map从地图框导入地图样式模板以颤振?

Question

我正在尝试通过flutter_map包在我的颤振应用程序中添加地图。 我尝试导入此地图框样式： 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(),
),
),
],
),
],
),

但它抛出此异常：

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

Answer 1

要导入地图框图块：

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

之后，添加以下内容：

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

Answer 2

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