颤振 |如何在 Mapbox 的标记/符号中添加自定义图标答案

【问题标题】：Flutter | how to add custom Icons in Mapbox's markers/symbol颤振 |如何在 Mapbox 的标记/符号中添加自定义图标
【发布时间】：2019-09-19 18:06:18
【问题描述】：

我想知道如何在 Flutter-Mapbox 插件的标记中使用他自己的图标？

没有默认标记图标（没有提供的图标 - 没有标记），并且没有足够的文档说明如何使用自定义图像。

添加符号（标记）如下：

mapController.addSymbol(
      SymbolOptions(
           geometry:LatLng(0.0, 0.0), // location is 0.0 on purpose for this example
           iconImage: "pin"
         )
      );

而IconImage，一个字符串，是应该包含有关图标数据的字段（显然），但给定的example repository 并没有明确所需的参数（url、路径等）。

提供资产路径不起作用（与其他小部件不同）。在示例中，他们为 IconImage 字段提供值 airport-15，并且在运行应用程序时，它确实可以工作，但我似乎无法找到资源的位置（它不在 @drawables 或我的资产文件夹中，或任何项目中的其他地方）

【问题讨论】：

标签： flutter mapbox

【解决方案1】：

从 0.0.5 版开始，可以为您的标记加载自定义图标图像。这个想法是将图标图像添加到您的资产文件夹（例如：assets/symbols/custom-icon.png）。如果您在 pubspec.yaml 中将此图像指定为资产并将SymbolOptions 中的iconImage 设置为此路径，它将自动加载。

关于airport-15，这是插件的Android实现提供的图标。它是 Mapbox 中使用的 Maki 图标的一部分。因为这些图标是 Android 实现的一部分，所以您不会将其作为 Flutter 资产或示例应用的 Android 资源找到。

【讨论】：

嗨，我正在我的 web 项目或 Flutter 的 PWA 项目中尝试你的答案。我在 pubspec.yaml 中添加了assets/symbols/marker.png，然后像这样设置它``` iconImage: "assets/ symbols/marker.png",``` 但它没有出现在地图中.. 有什么我应该添加的吗？
@Timothy Sealy 如果我想添加多个显示价格信息的标记怎么办？例如预订酒店。

【解决方案2】：

您必须在使用MapBox Studio 时创建自定义样式。

如果不存在，则创建一个新数据集
创建图块集
创建新样式并选择customize basic template
创建新层，为其命名，例如my_sym 并添加新创建的数据源
然后点击类型并将其更改为符号
现在点击my_sym 两次。（第一个将关闭选项菜单，第二个将打开一个带有符号属性的新菜单
点击icon 标签并选择新图标。您也可以上传自己的 svg 图标。
点击发布
点击分享会显示网址。
复制url类型并设置styleString属性。

有关更多信息，请按照此处的步骤操作 https://docs.mapbox.com/help/tutorials/add-points-pt-1/

API 参考： https://docs.mapbox.com/mapbox-gl-js/api/

【讨论】：