Javascript 谷歌地图5

我正在尝试创建一个使用动态标记的谷歌地图

不过，我似乎无法将“Font Awesome 5 Free”设置为要使用的字体

我可以设置“Fontawsome”，它可以工作，但不是webfont（它是安装在我的系统中的.TTF）

var marker0=createMarker({
位置：新google.maps.LatLng（33.808678，-117.918921），
地图：地图，
图标：{
路径：google.maps.SymbolPath.CIRCLE，
填充颜色：'#F00'，
不透明度：1，
冲程重量：0，
比例：15
},
标签：{
fontFamily：“FontAwesome”，
fontWeight:'900'，
文本：eval（“\\u”+“f0ab”+”），
颜色：“白色”
}
}，“标记0这是主标记。
”；
});

以下是JSFIDLE：

谷歌地图似乎没有将字体族属性应用于我创建的标记标签。根据谷歌的文档，语法看起来是正确的，但出于某种原因，所有样式都没有被应用。这里有一些前后屏幕，我们手动将字体系列样式放置在右侧元素上

---

我让它工作了，检查一下你的JSFIDLE

HTML

JS

/*
*将map声明为全局变量
*/
var映射；
/*
*使用GoogleMapsAPI内置机制来附加dom事件
*/
google.maps.event.addDomListener（窗口，“加载”，函数（）{
/*
*创建地图
*/
var map=new google.maps.map（document.getElementById（“map_div”）{
中心：新google.maps.LatLng（33.808678，-117.918921），
缩放：14，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
/*
*创建信息窗口（将由标记使用）
*/
var infoWindow=new google.maps.infoWindow（）；
/*
*marker creater函数（充当html参数的闭包）
*/
函数createMarker（选项，html）{
var marker=新的google.maps.marker（选项）；
如果（html）{
google.maps.event.addListener（标记“单击”，函数（）{
setContent（html）；
infoWindow.open（options.map，this）；
});
}
返回标记；
}
/*
*向地图添加标记
*/
var marker0=createMarker({
位置：新google.maps.LatLng（33.808678，-117.918921），
地图：地图，
图标：{
路径：google.maps.SymbolPath.CIRCLE，
填充颜色：'#F00'，
不透明度：1，
冲程重量：0，
比例：15
},
标签：{
fontFamily：“FontAwesome”，
fontWeight:'900'，
文本：“\uf0ab”，
颜色：“白色”
}
}，“标记0这是主标记
”；
});

---

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

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

---

我通过在本地加载FA并重命名字体来删除所有空格来修复它，即。“丰塔威索姆5自由”。谢谢大家的意见

由于我不想自定义我的常规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;
}

---

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

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

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

正如rsilva已经提到的，这似乎是API中的一个bug。在v3.31中模拟：

它无法处理使字体族属性无效的空格

它也不会将值视为字符串，如图所示

---

我也遇到了同样的麻烦，我的地图上显示的是一个方形图标，而不是一个漂亮的字体。 首先，我从cdnjs导入了.css和.js。 我以前从来没有用过

我删除所有内容并创建一个免费帐户，并从中生成一个“工具包链接”

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

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

---

不确定，但有两点。首先，避免像瘟疫一样进行评估。如果您的代码中只有一个地方，JS将在整个过程中运行得较慢，因为不知道将运行什么代码，JS无法进行优化。其次，由于FA5具有SVG功能，您可能会考虑将其用作图像，而不是google图像上的标签。谢谢您的输入。是的，我知道eval（）的缺点，但我不知道从一个变量中呈现unicode的任何其他方法。感谢您的尝试，但这不起作用。它仍然是从你的Fontawesome副本中提取的，而不是从新的库中提取的。我将你的代码复制到它自己的jsdidle中：在你的手机或没有Fontsome的电脑上查看它，你会发现问题所在。尝试将字体名称从“FontAweasome”更改为“FontAweasome 5 Free”以复制该问题。@rsilva该副本是FontAweasome网站向我提供的新库cdn，但您是对的，它不适用于

fontFamily:“font Aweasome 5 Free”“

根据文档，您必须设置：：before或：：after，而不能直接对label属性进行设置，因此您必须在标签中设置：：before或：：set。此外，您还可以下载.svg并将其插入到icon对象的path属性中。我的本地计算机中没有数据。网页字体必须注入到项目中，而不是计算机中。我在一家公司的电脑里，我这里没有任何与FA相关的东西，但是你必须将cdn或fontawesome web字体注入到你的项目中，而不是电脑。再次感谢你的时间。我已经从CDN更新了JSF IDLE t以使用FA 5x，并将unicode更改为在版本5中创建的unicode。正如您所看到的，它没有正确加载：我将尝试下载.svg并将其注入到icon对象的path属性中。再次感谢！所以你下载了.svg？不，我只是需要

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

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

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