Google Maps v3 FontAwesome5

Question

Я пытаюсь создать GoogleMap, который использует динамические маркеры fontAwesome

Я не могу установить «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 Maps не применяет свойство font-family к созданной мной метке маркера. Синтаксис, согласно документации Google, выглядит правильно, но по какой-то причине все стили, но это не применяется. Вот несколько экранов до и после, на которых мы вручную разместили стили семейства шрифтов на нужном элементе ...

Answer 1

Просто заключите семейство шрифтов в двойные или одинарные кавычки.

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

Как уже упоминалось в rsilva, это похоже на ошибку в API. Имитация в v3.31:

1. Он не может обрабатывать пробелы, которые делают недействительным атрибут font-family.
2. Также не обрабатывает значение как строку, как показано здесь

Обход

Answer 2

Проблема возникла из-за ошибки в API GoogleMaps, когда шрифты с пробелом в имени не заданы в свойствах маркера.

Я исправил это, загрузив FA локально и переименовав шрифт, чтобы удалить все пробелы, то есть "FontAwesome5Free '. Спасибо всем за ваш вклад.

Answer 3

Поскольку я не хотел настраивать свои обычные файлы 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 4

Я получил его на работу, проверьте ваш 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>"); 
});

Вы конкатенировали неверный юникод в метке, так как отсутствовала замечательная библиотека.