在 Google Maps V3 中使用图标字体作为标记 [英] Using Icon Fonts as Markers in Google Maps V3
本文介绍了在 Google Maps V3 中使用图标字体作为标记的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想知道是否可以在 Google Maps V3 中使用图标字体图标(例如 Font Awesome)作为标记来替换默认标记.要在 HTML 或 PHP 文档中显示/插入它们,标记的代码是:
I was wondering whether it is possible to use icon font icons (e.g. Font Awesome) as markers in Google Maps V3 to replace the default marker. To show/insert them in a HTML or PHP document the code for the marker would be:
<i class="icon-map-marker"></i>
推荐答案
在我意识到 Nathan 在上面更优雅地做了同样的事情之前,我尝试了同样的事情(使用markerwithlabel"实用程序库):http://jsfiddle.net/f3xchecf/
Here's my attempt at the same thing (using "markerwithlabel" utility library) before I realised Nathan did the same more elegantly above: 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();
这篇关于在 Google Maps V3 中使用图标字体作为标记的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文