Google Maps API V3 中作为标记的 Font Awesome 图标

Question

我想使用字体很棒的图标作为 Google 地图标记。这是我的代码：

function addMarker(marker) {    
    marker1 = new google.maps.Marker({ 
    position: new google.maps.LatLng(obj.geo_lat,obj.geo_lng),
    category: obj.status,
    map: map,
    icon: // Font Awesome icon here
});

我查看了 this 问题，但不幸的是，这对我来说无法正常工作。我想知道是否有另一种方法可以做到这一点。

Answer 1

是的，有。您可以使用 RichMarker

示例：

function addMarker(marker) {    
        marker1 = new RichMarker({ 
            position: new google.maps.LatLng(obj.geo_lat,obj.geo_lng),
            category: obj.status,
            map: map,   
            draggable: false,
            flat:true,
            anchor: RichMarkerPosition.MIDDLE,
            content: '<i class="fa fa-map-marker fa-2x"></i>'
        });
}

Answer 2

另一种可能的解决方案是（不使用其他外部库）：

marker1 = new google.maps.Marker({
    position: new google.maps.LatLng(obj.geo_lat,obj.geo_lng),
    map: map,
    label: {
        fontFamily: 'Fontawesome',
        text: '\uf192', //code for font-awesome icon
        fontSize: '15px',
        color: 'red'
    },
    icon: {
        path: google.maps.SymbolPath.CIRCLE, //or any others
        scale: 0
    }
});

Google Maps API V3 中作为标记的 Font Awesome 图标

Font Awesome icon as marker in Google Maps API V3

javascript

google-maps

google-maps-api-3

font-awesome