Wie Schrift ehrfürchtiges Symbol Klasse hinzufügen Google Maps-Etikett

Question

ich Stunden der Suche nach einem Weg, um hinzuzufügen Schrift ehrfürchtiges Symbol Klasse ausgegeben habe Karten Label Klasse Google, aber ich kann die Lösung finden. Ich habe gmaps und markerwithlabes Plugin versucht, aber immer noch kann ich es nicht zur Arbeit bekommen. Ich habe versucht, zu Overlays aber sie dupliziert bekommen beim Zoomen .. Hier ist ein Stück von meinem Javascript-Code

var marker = new google.maps.Marker({ 
 
          'position': latLng, 
 
          'icon': markerImage , 
 
          'label': {'text': '<i></i>', 'color': "black"}, 
 
          'optimized': false 
 

 
         });

ich dabei helfen müssen.

Answer 1

ich bezweifle, dass Sie tatsächlich html in das Etikett einfügen könnte. Es ist jedoch möglich, ikonische Schriftarten wie FontAwesome zu verwenden.

Wenn Sie ein Element und Stil es als FA-Symbol verwenden:

<i class="fa-camera-retro"></i> 

FontAwesome fügt ein Unicode-Zeichen an den :before pseudoselector des i Element:

.fa-camera-retro:before { 
    content: "\f083"; 
} 

So erreichen die gleiche Wirkung in einem Marker-Label, könnten Sie das gleiche Unicode-Zeichen als Text für das Marker-Label deklarieren:

label:{ 
    text: String.fromCharCode("0xf083"), 
    fontFamily: 'FontAwesome' 
} 

Natürlich ist dies nicht so intuitiv wie FA Klassennamen verwenden, aber dann wieder, niemand sagte, es einfach sein würde.

Ich verließ Sie einen Ausschnitt für Sie versuchen, zu:

var centerMap={lat:0,lng:-77 }, 
 
    zoom=7; 
 
    
 
function initMap(){ 
 
var map = new google.maps.Map(document.getElementById('map'), { 
 
    center: centerMap, 
 
    scrollwheel: false, 
 
    zoom: zoom 
 
}); 
 

 
var marker=new google.maps.Marker({ 
 
    position:map.getCenter(), 
 
    map:map, 
 
    label:{ 
 
     text: String.fromCharCode("0xf083"), 
 
     fontFamily: 'FontAwesome' 
 
    } 
 
}); 
 

 
} 
 

 
document.addEventListener("DOMContentLoaded", function() { 
 
    initMap(); 
 
}); 
 

#map { 
 
width:100%; 
 
height:90vh; 
 
}

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
    
 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
 
<i class="fa fa-camera-retro"></i> fa-camera-retro 
 
    
 
<div id="map"></div>