Question

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

我似乎无法将'Font Awesome 5 Free'设置为使用的字体。

我可以将'Fontawsome'设置为有效，但不是webfont（它是我的系统中安装的.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属性应用于我创建的标记标签。根据谷歌的文档，语法看起来是正确的，但由于某种原因，所有风格，但没有被应用。这里有一些前后屏幕，我们手动将该字体系列样式放在正确的元素上......

Answer 1

问题出现了，因为GoogleMaps API存在一个错误，其中名称中包含空格字符的字体不会在标记属性中设置。

我通过在本地加载FA并重命名字体以删除所有空格来修复它，即＆＃34; FontAwesome5Free＆＃39;。谢谢各位的意见。

Answer 2

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

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

正如rsilva所引用的，这似乎是API中的错误。在v3.31中进行了仿真：

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

Workaround

Answer 3

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

HTML

/*
 * 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>"); 
});

JS

exports.welcomeEmail = functions.firestore.document('Users/{userId}')
.onCreate((snap, context)=>{
  const user = snap.data();
  const msg = {
        to: user.email,
        from: 'cybertronjc3@gmail.com',
        subject: 'Welcome to COFOZ',
        templateId: '1c455865-4529-4ae1-8e5a-9a5b8eaf0157',
        substitutionsWrappers: ['{{', '}}'],
        substitutions: {
            name: user.name
        }
  return sgMail.send(msg)
}

你正在连接标签中的unicode错误以及fontawesome库缺失。

Answer 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;
}

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

Answer 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'
},

Google Maps v3 FontAwesome5

5 个答案: