Я пытаюсь создать googleMap, который использует динамические fontAwesome маркеры
Я, похоже, не могу установить "Font Awesome 5 Free" в качестве шрифта, который будет использоваться.
Я могу установить "Fontawsome", который работает, но не является webfont (это.TTF, установленный в MY-системе)
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, выглядит правильно, но по какой-то причине весь стиль, но не применяется. Вот некоторые из них до и после экранов, где мы вручную разместили этот стиль шрифта в правильном элементе...
Проблема возникла из-за ошибки с API GoogleMaps, когда шрифты с пространственным символом в их имени не попадают в свойства маркера.
Я исправил его, загрузив FA локально и переименовав шрифт, чтобы удалить все пробелы, то есть "FontAwesome5Free". Спасибо всем за ваш вклад.
Просто включите семейство шрифтов в двойные или одинарные кавычки.
fontFamily: "'Font Awesome 5 Free'" // or '"Font Awesome 5 Fee"'
Как уже упоминалось rsilva, это, кажется, ошибка в API. Имитировано в версии 3.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;
}
Таким образом, у меня есть фамилия шрифта без пробелов, но я все равно могу легко обновить пакет bootstrap без изменения
Я получил его для работы, проверьте ваш jsFiddle https://jsfiddle.net/as0srs2b/1/
HTML
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&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 неправильным в метке, а также отсутствовала библиотека шрифтов.
fontFamily: "Font Awesome 5 Free"'
соответствии с документацией, которую вы должны установить :: before или :: after, и вы не можете сделать это напрямую со свойством label, поэтому вам придется сделать трюк, чтобы получить :: before или :: set в метке. Также вы можете скачать .svg и вставить его в свойство path объекта icon