谷歌地图 v3 FontAwesome5答案

【问题标题】：Google Maps v3 FontAwesome5谷歌地图 v3 FontAwesome5
【发布时间】：2018-10-19 18:42:22
【问题描述】：

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

【问题讨论】：

不确定，但有两点。首先，避免 eval() 像瘟疫一样。如果您在代码中甚至有一个位置，JS 将在整个过程中运行得更慢，因为它无法优化不知道将运行什么代码。其次，由于 FA5 具有 SVG 功能，您可能会考虑将其用作图像而不是谷歌图像顶部的标签。
感谢您的意见。是的，我知道 eval() 的缺点，但我不知道从 var 呈现该 unicode 的任何其他方式

标签： javascript google-maps-api-3 google-maps-markers font-awesome font-awesome-5

【解决方案1】：

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

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

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

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

Workaround

【讨论】：

谢谢！它仅在我将它与 fontWeight: '900' 一起使用时才起作用（如解决方法图像中所示）。显然这不是错误，而是 FA 的要求，以便他们可以区分常规、实心等。

【解决方案2】：

出现问题是因为 GoogleMaps API 存在一个错误，即名称中带有空格字符的字体未在标记属性中设置。

我通过在本地加载 FA 并重命名字体以删除所有空格来修复它，即“FontAwesome5Free”。感谢大家的输入。

【讨论】：

所以你下载了.svg？
不，我只需要重命名字体。我没有使用 JS 集成。
你到底做了什么？

【解决方案3】：

我让它工作了，检查你的 jsFiddle https://jsfiddle.net/as0srs2b/1/

HTML

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<script src="https://use.fontawesome.com/6608b6cbc6.js"></script>
<div id="map_div" style="height: 400px;"></div>

JS

/*
 * declare map as a global variable
 */
var map;

/*
 * use google maps api built-in mechanism to attach dom events
 */
google.maps.event.addDomListener(window, "load", function () {

  /*
   * create map
   */
  var map = new google.maps.Map(document.getElementById("map_div"), {
    center: new google.maps.LatLng(33.808678, -117.918921),
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  /*
   * create infowindow (which will be used by markers)
   */
  var infoWindow = new google.maps.InfoWindow();

  /*
   * marker creater function (acts as a closure for html parameter)
   */
  function createMarker(options, html) {
    var marker = new google.maps.Marker(options);
    if (html) {
      google.maps.event.addListener(marker, "click", function () {
        infoWindow.setContent(html);
        infoWindow.open(options.map, this);
      });
    }
    return marker;
  }

  /*
   * add markers to map
   */
  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: "\uf0ab",
      color: 'white'
    }
    }, "<h1>Marker 0</h1><p>This is the home marker</p>"); 
});

您在标签中连接了错误的 unicode，并且缺少 fontawesome 库。

【讨论】：

感谢您的尝试，但没有奏效。它仍然从您的 Fontawesome 副本中提取，而不是从新库中提取。我将您的代码复制到它自己的 jsdidle 中：jsfiddle.net/robsilva/as0srs2b 在您的手机或没有 FontAwesome 的计算机上查看它，您会看到问题。尝试将字体名称从“Fontawesome”更改为“Font Awesome 5 Free”以重现该问题。
@rsilva 该副本是他们从 Font Awesome 网站 cdn.fontawesome.com 为我提供的新库 cdn，但您是对的，根据您必须设置的文档，它不适用于 fontFamily: "Font Awesome 5 Free"' ::before 或 ::after 并且您不能直接对 label 属性执行此操作，因此您必须采取一些技巧来获取 ::before 或 ::标签中设置。此外，您可以下载 .svg 并将其注入到图标对象的路径属性中
jsfiddle.net/as0srs2b/1 。我的本地计算机中没有 fontawesome。必须将 Web 字体注入项目而不是计算机。我在公司的计算机上，我在这里没有任何与 FA 相关的内容，但是您必须将 cdn 或 fontawesome 网络字体注入您的项目而不是计算机
再次感谢您的宝贵时间。我已经更新了 jsfidle 以使用来自 CDN 的 FA 5x，并且我也将 unicode 更改为在版本 5 中创建的一个。如您所见，它无法正确加载：jsfiddle.net/as0srs2b
我将尝试下载 .svg 并将其注入到图标对象的路径属性中。再次感谢！

【解决方案4】：

由于我不想自定义我的普通 npm 文件以确保轻松更新，我的解决方案是创建另一个 scss 文件，将其导入我的 app.scss 并使用 @rsilva 的想法来解决问题：

/*!
 * Font Awesome Free 5.2.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
$fa-font-path: "../webfonts" !default;

@font-face {
  font-family: 'FontAwesome5Free';
  font-style: normal;
  font-weight: 900;
  src: url('#{$fa-font-path}/fa-solid-900.eot');
  src: url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'),
  url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
  url('#{$fa-font-path}/fa-solid-900.woff') format('woff'),
  url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'),
  url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg');}

.fa,
.fas {
  font-family: 'FontAwesome5Free';
  font-weight: 900;
}

因此，我有一个没有空格的字体系列名称，但仍然可以轻松更新我的引导程序包而无需更改任何内容

【讨论】：

【解决方案5】：

我遇到了同样的麻烦，我的地图显示的是方形图标，而不是漂亮的 FontAwesome。首先，我从 cdnjs 导入了 .css 和 .js。我以前从未使用过Fontawesome...

我删除所有内容并创建一个免费帐户，并从https://fontawesome.com生成一个“工具包链接”

如上所述，我得到了一个带有自定义 UID 的网址

<script src="https://kit.fontawesome.com/xxxxxxxx.js" crossorigin="anonymous"></script>

这对我来说是使用标签时的技巧：

label: {
     text: '\uf299',
     fontFamily: 'FontAwesome',
     fontSize: '15px',
     color: 'white'
},

【讨论】：