如何添加字體真棒圖標類谷歌地圖標籤

-1

我花了幾個小時尋找一種方式來添加字體真棒圖標類谷歌地圖標籤類，但我不能找到解決方案。我嘗試過gmaps和markerwithlabes插件，但仍然無法使其工作。我試圖覆蓋太多，但它們會在變焦的同時複製..下面是一段我的javascript代碼如何添加字體真棒圖標類谷歌地圖標籤

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

 
         });

我需要這方面的幫助。

來源

2017-03-27 Fredrick Reuben

你可以得到標記的字體更改爲自定義字體？（不只是FA，但任何） – dandavis

我懷疑你實際上可以html插入標籤。但是，可以使用FontAwesome這樣的圖標字體。

當您使用的元素和風格它作爲FA圖標：

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

FontAwesome插入一個Unicode字符的:before pseudoselector的i元素：

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

因此，要實現在標識標籤相同的效果，你可以聲明相同的Unicode字符的文本標記標籤：

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

當然，這並不像使用FA類名那樣直觀，但隨後，同樣沒有人說這將是直接的。

我給你留一個片段，您可以嘗試：

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>

來源

2017-03-28 00:14:52 amenadiel

你有點回答我的問題，但問題是我的圖標是動態的。由php自動生成..訪問風格屬性仍然是一個challage .. –

如何添加字體真棒圖標類谷歌地圖標籤

回答

相關問題