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

Question

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

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

- gfaw

---

我认为这不太可能，一种做法是从 Font Awesome 图标中提取 SVG 属性，然后使用 SVG 符号定义 google.maps.Symbol。然后您就可以将它们用作符号。 - nevi_me

这是个好主意 - 在提取图标路径和进行一些修改后，我成功地创建了所需的效果。感谢你指我正确的方向！ - gfaw

不用担心，如果你有时间，你可以将它们全部放入Font Awesome Google Maps中，并将它们托管在Github/Bitbucket上。我认为Font Awesome许可证会允许这样做。 - nevi_me

据我所知，人们已经在努力使字体与Google Maps兼容。在此期间，要利用它，请在编辑器中打开font-awesome.svg并搜索所需的图标语句。然后复制SVG路径并将其定义为Google地图中的自定义多边形。有关详细信息，请查看Google Maps V3参考/代码示例。 - gfaw

我知道如何做，只是没有时间去做。Mapbox有一个字体集叫做"Maki"。我正在考虑将其移植到SVG。 - nevi_me

Answer 1

我遇到了同样的问题-决定进行快速且简单的转换并在github上托管。

https://github.com/nathan-muir/fontawesome-markers

您可以手动包含JS文件，或使用npm install fontawesome-markers或bower install fontawesome-markers.

只需包含javascript文件fontawesome-markers.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-m

---

感谢您在一年后仍保持脚本的更新！+1 - Lindsey D

不错。我发现将图标偏移很有用，像这样： anchor: new google.maps.Point(30,-30) - Igor Krupitsky

fontawesome-markers.4.6.1.min.js - https://github.com/veteze/fontawesome-markers/blob/patch-1/fontawesome-markers.4.6.1.min.js - Ryan Vettese

值得一提的是，这个JS文件有0.5 MB大。 - Adam

我在font-awesome v4.1中引入的fontawesome-markers.min.js v4.6.1脚本文件中找不到GRADUATION_CAP图标。 - Kar.ma

它有一个别名 - MORTAR_BOARD - nathan-m

Answer 2

我知道这篇文章很旧，但是以防万一，现在你可以使用MarkerLabel对象:

var marker = new google.maps.Marker({
    position: location,
    map: map,
    label: {
        fontFamily: 'Fontawesome',
        text: '\uf299'
    }
});

对我很有用。

.

参考Google Maps Maker

- guido

---

谢谢，兄弟。有了这个，就不需要使用任何外部插件了。 - HolloW

这真的很令人困惑。你在谈论markerLABEL而不是marker。 - Goowik

您可以将标签对象定义为Marker的选项。根据文档，“向标记添加标签。标签可以是字符串或MarkerLabel对象。” - guido

真的！我不想要粉色标记，所以我只需将“Marker.icon =' '”设置为单个空格，就像Jason的答案中所做的那样。[MarkerLabel]（https://developers.google.com/maps/documentation/javascript/reference#MarkerLabel）可以采用各种样式，包括fontSize和color来自定义图标。非常简单，谢谢@guido！ - Joel Mellon

对于 API 的高版本，如果上述代码无法运行，只需进一步用双引号 "'Fontawesome'" 括起来即可。原文链接：https://stackoverflow.com/questions/50256889/google-maps-v3-fontawesome5/51788072#51788072 - duduwe

Answer 3

这是我尝试使用“markerwithlabel”实用库来做同样的事情之前，我没有意识到Nathan在上面更优雅地完成了相同的工作：http://jsfiddle.net/f3xchecf/

function initialize() {

    var myLatLng = new google.maps.LatLng( 50, 50 ),
        myOptions = {
            zoom: 4,
            center: myLatLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
            },

        map = new google.maps.Map( document.getElementById( 'map-canvas' ), myOptions ),

     marker = new MarkerWithLabel({
       position: myLatLng,
       draggable: true,
       raiseOnDrag: true,
       icon: ' ',
       map: map,
         labelContent: '<i class="fa fa-send fa-3x" style="color:rgba(153,102,102,0.8);"></i>',
       labelAnchor: new google.maps.Point(22, 50)
     });

    marker.setMap( map );
}

initialize();

- Jason

---

这很好，因为它不需要额外的JS，但我喜欢两种解决方案。 - Taruc

我尝试让它工作，但是它不起作用，而且在Fiddler中也不起作用。您有更新的解决方案吗？ - Aaron

@Aaron，你需要使用其他答案中链接的Github库。https://github.com/nathan-muir/fontawesome-markers - Xander Luciano

Answer 4

轻量级解决方案

• fontawesome-markers: 480kb
• markerwithlabel: 25kb

为避免这些依赖，只需前往fontawesome-markers，找到所需图标的路径，并按以下方式包含它：

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

- Jeremy Lynch

---

您也可以前往https://fontawesome.com/icons下载任何图标的SVG并获取路径。 - Juan Jimenez

Answer 5

在现代浏览器中，可以使用画布将字体呈现为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") 是关于音符的。

- Roman

---

请使用 "ctx.fillStyle = color;" 或者 "ctx.strokeText" 替代 "ctx.fillText"。 - Laurent W.

Answer 6

如果您想使用内部有awesomefont图标的awesomefont MARKER：

1. 复制awesomefont标记的SVG路径（点击下载并复制SVG路径），将其用作icon（请记得给作者注明出处，详见许可协议）。然后，您可以将其颜色更改为任何您想要的颜色。

2. 作为label，您只需插入awesome font图标代码和所需的颜色即可。

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<div id="map"></div>
<script>
  function init() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 6,
      center: new google.maps.LatLng(51.509865, -0.118092)
    });
    var icon = {
        path: "M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 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", //SVG path of awesomefont marker
        fillColor: '#333333', //color of the marker
        fillOpacity: 1,
        strokeWeight: 0,
        scale: 0.09, //size of the marker, careful! this scale also affects anchor and labelOrigin
        anchor: new google.maps.Point(200,510), //position of the icon, careful! this is affected by scale
        labelOrigin: new google.maps.Point(205,190) //position of the label, careful! this is affected by scale
    }

    var marker = new google.maps.Marker({
      position: map.getCenter(),
      map: map,
      icon: icon,
      label: {
        fontFamily: "'Font Awesome 5 Free'",
        text: '\uf0f9', //icon code
        fontWeight: '900', //careful! some icons in FA5 only exist for specific font weights
        color: '#FFFFFF', //color of the text inside marker
      },
    });
  }
  google.maps.event.addDomListener(window, 'load', init);
</script>

- Matej P.

---

这非常棒。谢谢您的发布。 - Milo Persic

我从哪里可以获取类似于“uf0f9”这样的代码？因为我想在地图上使用不同的图标。 - Waqas Altaf

Answer 7

可以直接从@fortawesome/free-solid-svg-icons导入SVG文件，并使用图标接口。

import { faMapMarkerAlt } from "@fortawesome/free-solid-svg-icons";

function initMap(): void {
  const center = { lat: 0, lng: 0 };

  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 9,
      center,
    }
  );

  new google.maps.Marker({
    position: { lat: 0, lng: 0 },
    map,
    icon: {
      path: faMapMarkerAlt.icon[4] as string,
      fillColor: "#0000ff",
      fillOpacity: 1,
      anchor: new google.maps.Point(
        faMapMarkerAlt.icon[0] / 2, // width
        faMapMarkerAlt.icon[1] // height
      ),
      strokeWeight: 1,
      strokeColor: "#ffffff",
      scale: 0.075,
    },
  });
}

可在以下网址进行尝试：https://codesandbox.io/embed/github/googlemaps/js-samples/tree/sample-marker-modern

- jpoehnelt

Answer 8

我制作了一个简单的JS库，使用Font Awesome图标生成漂亮的SVG标记。

https://github.com/jawj/MapMarkerAwesome

- jawj

---

很好！谢谢你！ - anon

Answer 9

我看到的都不错，但它们对我没有用；然而，这个很顺畅且小巧。

使用链接到您的字体awesome库的任何地方。

正常的标记javascript代码很好，并添加图标属性。

// 标记

var marker = new google.maps.Marker({

position: uluru,

icon: 'https://cdn.mapmarker.io/api/v1/pin?icon=fa-truck&size=50&hoffset=0&color=%23FFFFFF&background=%23FF7500&voffset=-1',

map: map,

});

}

您可以在icon属性中更改字体awesome图标、位置、颜色等。

- Zehlm Web Development LLC