javascript - 谷歌地图 v3 FontAwesome5

Question

我正在尝试创建一个使用动态 fontAwesome 标记的 googleMap

不过，我似乎无法将“Font Awesome 5 Free”设置为要使用的字体。

我可以设置“Fontawsome”，但它不是网络字体(它是我系统中安装的 .TTF)

      var marker0 = createMarker({
        position: new google.maps.LatLng(33.808678, -117.918921),
        map: map,
        icon: {
          path: google.maps.SymbolPath.CIRCLE,
          fillColor: '#F00',
          fillOpacity: 1,
          strokeWeight: 0,
          scale: 15
        },
        label: {
          fontFamily: "FontAwesome",
          fontWeight: '900',
          text: eval("'\\u"+'f0ab'+"'"),
          color: 'white'
        }
        }, "<h1>Marker 0</h1><p>This is the home marker.</p>");
    });

这是 jsfiddle:https://jsfiddle.net/robsilva/hxt5jcu5/

Google map 似乎没有将 font-family 属性应用于我创建的标记标签。根据谷歌的文档，语法看起来是正确的，但由于某种原因，所有的风格都没有被应用。这里有一些之前和之后的屏幕，我们手动将字体系列样式放置在正确的元素上......

Answer 1

只需将字体系列用双引号或单引号引起来即可。

fontFamily: "'Font Awesome 5 Free'" // or '"Font Awesome 5 Fee"'

正如 rsilva 已经引用的那样，这似乎是 API 中的一个错误。在 v3.31 中模拟:

1. 它无法处理使 font-family 属性无效的空格。
2. 它也不会将值视为字符串，如图所示 here

Workaround