javascript - 谷歌地图 v3 FontAwesome5

问题描述

我正在尝试创建一个使用动态 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/

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

标签： javascriptgoogle-maps-api-3google-maps-markersfont-awesomefont-awesome-5

只需将字体系列括在双引号或单引号中即可。

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

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

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

解决方法

javascript - 谷歌地图 v3 FontAwesome5

问题描述

解决方案

推荐阅读