Question

我花了几个小时寻找一种方法来添加字体真棒图标类到谷歌地图标签类，但我找不到解决方案。我已经尝试过gmaps和markerwithlabes插件，但我仍然无法让它工作。我也尝试过覆盖，但是在缩放时它们会重复。这是我的一段javascript代码

＆＃13;

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

＆＃13;

我需要帮助。

Answer 1

我怀疑你是否可以在标签中插入html。但是，可以使用FontAwesome等标志性字体。

当您使用元素并将其设置为FA图标时：

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

FontAwesome将一个unicode字符插入:before元素的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>

如何将字体真棒图标类添加到谷歌地图标签

1 个答案: