Question

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

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

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的软件包 - ＆gt; v4.6.1

Answer 2

我知道这是一篇旧帖子，但万一你现在可以使用MarkerLabel对象：

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

为我工作。

See fontawesome icon on google map marker

Reference Google Maps Maker

Answer 3

在我意识到Nathan在上面做得更优雅之前，我尝试了同样的事情（使用＆＃34; markerwithlabel＆＃34;实用程序库）：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();

Answer 4

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

Answer 5

轻量级溶液

fontawesome-markers：25kb
markerwithlabel：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 });

为了避免这些依赖关系，只需转到fontawesome-markers，找到所需图标的路径，并按如下所示包含它：

Promise<T>

Answer 6

如果您要带有真棒字体图标的真棒MARKER ：

1。。复制SVG path of the awesomefont marker（单击下载并复制SVG路径）并将其用作it.__anext__()（请记住作者，请参阅license ）。然后，您可以将其颜色更改为所需的任何颜色。

2。。作为icon，您只需插入超酷的字体图标代码和所需的颜色。

label

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

Answer 7

我已经整理了一个简单的JS库，它使用Font Awesome图标生成漂亮的SVG标记。 https://github.com/jawj/MapMarkerAwesome

Answer 8

可以直接从 @fortawesome/free-solid-svg-icons 导入 svgs 并使用 Icon Interface。

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

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

8 个答案:

轻量级溶液