在Google地图V3中使用图标字体作为标记
我想知道是否可以在Google Maps V3中使用图标字体图标（例如Font Awesome）作为标记来replace默认标记。 要显示/插入到HTML或PHP文档中，标记的代码是：
<i class="icon-map-marker"></i> 这是我在尝试同样的事情（使用“markerwithlabel”实用程序库）之前，我意识到内森在上面做的更优雅： 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();
我只是有同样的问题 – 决定做一个快速和肮脏的转换和主机上的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）：现在有包的V4.2 – > V4.6.1
我知道这是一个旧的post，但以防万一你现在可以使用MarkerLabel对象：
var marker = new google.maps.Marker({ position: location, map: map, label: { fontFamily: 'Fontawesome', text: '\uf299' } });
为我工作。
。
参考Google Maps Maker
在现代浏览器中，可以使用canvas将字体呈现为png，然后使用数据URIscheme：
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")为音乐笔记。
重量轻的解决scheme
- fontawesome-markers：
480kb - markerwithlabel：25kb
为了避免这些依赖关系，简单的去找fontawesome-markers ，find你想要的图标的path，并按如下方式包含它：
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 });
我已经放在一起使用Font Awesome图标生成很好的SVG标记的简单的JS库。 https://github.com/jawj/MapMarkerAwesome
