Google maps api 3 在Google Maps V3中使用图标字体作为标记

我想知道是否可以在Google Maps V3中使用图标字体图标（例如font Awesome）作为标记来替换默认标记。要在HTML或PHP文档中显示/插入标记，标记的代码应为：

<i class="icon-map-marker"></i>

---

我也遇到了同样的问题——决定在github上进行快速而肮脏的转换和托管

您可以手动包含JS文件，或使用

npm安装fontawesome标记

或

bower安装fontawesome标记

只需包含javascript文件

fontawesomemarkers.min.js

，您就可以像这样使用它们：

new google.maps.Marker({
    map: map,
    icon: {
        path: fontawesome.markers.EXCLAMATION,
        scale: 0.5,
        strokeWeight: 0.2,
        strokeColor: 'black',
        strokeOpacity: 1,
        fillColor: '#f8ae5f',
        fillOpacity: 0.7
    },
    clickable: false,
    position: new google.maps.LatLng(lat, lng)
});

---

编辑（2016年4月）：现在有了v4.2->v4.6.1的软件包，在我意识到Nathan在上面更优雅地做了同样的事情之前，我尝试了同样的事情（使用“markerwithlabel”实用程序库）：

函数初始化（）{
var mylatng=new google.maps.LatLng（50,50），
myOptions={
缩放：4，
中心：myLatLng，
mapTypeId:google.maps.mapTypeId.ROADMAP
},
map=new google.maps.map（document.getElementById（'map canvas'），myOptions），
标记=新标记WithLabel({
职位：myLatLng，
真的，
是的，
图标：“”，
地图：地图，
标签内容：“”，
新谷歌地图点（22,50）
});
marker.setMap（map）；
}
初始化（）；

在现代浏览器中，可以使用画布将字体渲染为png，然后使用数据URI方案：

  function getIcon(glyph, color) {
    var canvas, ctx;
    canvas = document.createElement('canvas');
    canvas.width = canvas.height = 20;
    ctx = canvas.getContext('2d');
    if (color) {
      ctx.strokeStyle = color;
    }
    ctx.font = '20px FontAwesome';
    ctx.fillText(glyph, 0, 16);
    return canvas.toDataURL();
  }

---

例如：

getIcon（“\uf001”）

用于音符。

我知道这是一篇旧文章，但为了以防万一，您现在可以使用

MarkerLabel

对象：

var marker=new google.maps.marker({
位置:位置,，
地图：地图，
标签：{
fontFamily：“Fontawesome”，
文本：'\uf299'
}
});

为我工作

---

我创建了一个简单的JS库，它使用字体图标生成漂亮的SVG标记

轻量溶液

• FONTSOWER标记：

  480kb

• 带标签的标记：

  25kb

要避免这些依赖关系，请简单地转到，找到所需图标的路径，并将其包括在内，如下所示：

var icon = {
    path: "M27.648-41.399q0-3.816-2.7-6.516t-6.516-2.7-6.516 2.7-2.7 6.516 2.7 6.516 6.516 2.7 6.516-2.7 2.7-6.516zm9.216 0q0 3.924-1.188 6.444l-13.104 27.864q-.576 1.188-1.71 1.872t-2.43.684-2.43-.684-1.674-1.872l-13.14-27.864q-1.188-2.52-1.188-6.444 0-7.632 5.4-13.032t13.032-5.4 13.032 5.4 5.4 13.032z",
    fillColor: '#E32831',
    fillOpacity: 1,
    strokeWeight: 0,
    scale: 0.65
}

marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    icon: icon
});

---

如果您想要内部带有awesomefont图标的awesomefont标记：

1。复制（单击下载并复制SVG路径），并将其用作

图标（请记住，要归功于作者，请参阅）。
然后你可以把它的颜色改成你想要的任何颜色

2.作为
标签
您只需插入所需的出色字体图标代码和颜色


html，
身体，
#地图{
身高：100%；
宽度：100%；
保证金：0；
填充：0；
}

函数init（）{
var map=new google.maps.map（document.getElementById（'map'）{
缩放：6，
中心：新google.maps.LatLng（51.509865，-0.118092）
});
变量图标={
路径：“M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0 S192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0z”//awesomefont标记的SVG路径
fillColor:“#333”，//标记的颜色
不透明度：1，
冲程重量：0，
比例：0.09，//标记的大小，小心！这个比例也会影响锚定和标签
新的google.maps.Point（200510），//图标的位置，小心！这受比例的影响
labelOrigin:new google.maps.Point（205190）//标签的位置，小心！这受比例的影响
}
var marker=new google.maps.marker({
位置：map.getCenter（），
地图：地图，
图标：图标，
标签：{
fontFamily:“'Font Aweasome 5 Free'”，
文本：'\uf0f9'，//图标代码
fontWeight:'900'，//小心！FA5中的某些图标只针对特定的字体权重存在
颜色：'#FFFFFF'，//标记内文本的颜色
},
});
}
google.maps.event.addDomListener（窗口'load'，init）；
可以直接从导入SVG并使用

从“@fortawesome/free solid svg icons”导入{famapmarat}”；
函数initMap（）：void{
常数中心={lat:0，lng:0}；
const map=new google.maps.map(
document.getElementById（“map”）作为HTMLElement，
{
缩放：9，
居中
}
);
新的google.maps.Marker({
位置：{lat:0，lng:0}，
地图，
图标：{
路径：famapmaralt.icon[4]作为字符串，
fillColor:#0000ff“，
不透明度：1，
主播：新google.maps.Point(
famapmaralt.icon[0]/2，//宽度
famapmaralt.icon[1]//高度
),
冲程重量：1，
strokeColor:#ffffff“，
比例：0.075，
},
});
}

可以在以下位置尝试：
我认为这是不可能的，一种方法是从字体图标中提取SVG属性，然后使用SVG符号定义
google.maps.Symbol
。然后你可以将它们用作符号这是一个好主意-在提取图标路径和一些修改后，我能够创建所需的效果。谢谢你给我指明了正确的方向！不用担心，如果你有时间的话，你可以把它们都放到一个很棒的谷歌地图
中，然后把它们放在Github/Bitbucket上。我认为字体很棒的许可证会允许这一点。英国人已经在努力使字体与谷歌地图兼容。要同时利用它，请在编辑器中打开font-awome.svg并搜索所需的图标语句。然后复制SVG路径并在google maps中定义自定义多边形。查看GoogleMapsV3参考/代码示例了解详细信息。我知道怎么做，只是没有时间去做。Mapbox设置了一种字体，名为
Maki
。我正在考虑将其移植到SVG+1中，以便在一年后保持脚本更新！美好的我发现它对我有用
var icon = {
    path: "M27.648-41.399q0-3.816-2.7-6.516t-6.516-2.7-6.516 2.7-2.7 6.516 2.7 6.516 6.516 2.7 6.516-2.7 2.7-6.516zm9.216 0q0 3.924-1.188 6.444l-13.104 27.864q-.576 1.188-1.71 1.872t-2.43.684-2.43-.684-1.674-1.872l-13.14-27.864q-1.188-2.52-1.188-6.444 0-7.632 5.4-13.032t13.032-5.4 13.032 5.4 5.4 13.032z",
    fillColor: '#E32831',
    fillOpacity: 1,
    strokeWeight: 0,
    scale: 0.65
}

marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    icon: icon
});