在Google地图V3中使用图标字体作为标记 [英] Using Icon Fonts as Markers in 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在上面做得更加优雅之后： 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地图V3中使用图标字体作为标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！