Font Awesome icon as marker in Google Maps API V3

半世苍凉 提交于 2019-12-06 05:27:29

问题


I want to use a font awesome icon as Google Maps marker. Here is my code:

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
});

I've looked at this question, but unfortunately this is not working properly for me. I was wondering if there's another way to do this.


回答1:


Yes, there is. You can use RichMarker

Example:

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>'
        });
}



回答2:


Another possible solution is this (without use of other external libraries):

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
    }
});


来源:https://stackoverflow.com/questions/36764519/font-awesome-icon-as-marker-in-google-maps-api-v3

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!