在谷歌地图中使用CSS字体真棒标记

Question

我想创建一个谷歌地图的制造商使用字体真棒的符号。我想，它看起来在某种程度上是这样的：

---

我发现在Using Icon Fonts as Markers in Google Maps V3这个问题的解决方案，但是这需要包括一个.js文件是〜0.5 MB大，因此不可用于我。

我也发现这个解决方案：https://github.com/lvoogdt/Leaflet.awesome-markers但我不喜欢标记的风格。

我设法用CSS创建以下图片

<div style='display:inline-block;background-color:#08c;padding:10px;border-radius:20px;border:2px solid #FFF;color:#FFF;'> 
    <i class="fa fa-university" aria-hidden="true"></i> 
</div> 

但我不知道如何：

1. 在底部用得到一个漂亮的白色指针CSS（如在紫色图标中）

2. t o在谷歌地图中使用这个CSS标记。我能想到的最好的方法是制作屏幕截图，使黑色背景透明并将其保存为png。但我想一定有更合适的方法来做到这一点？

---

编辑：我在评论中发现从Using Icon Fonts as Markers in Google Maps V3

我不认为这是可能的，这样做的一个方式，将提取 从字体的SVG属性令人敬畏的图标，然后使用SVG符号定义 google.maps.Symbol。然后你就可以使用它们 作为符号

我试过了，失败了。我使用unicode：f19c的bank图标。于是我运行结束fontawesome-webfont.svg并找到一个条目

<glyph unicode="&#xf19c;" horiz-adv-x="2048" d="M960 1536l960 -384v- 
128h-128q0 -26 -20.5 -45t-48.5 -19h-1526q-28 0 -48.5 19t-20.5 
45h-128v128zM256 896h256v-768h128v768h256v-768h128v768h256v-768h128v768h256v- 
768h59q28 0 48.5 -19t20.5 -45v-64h-1664v64q0 26 20.5 45t48.5 19h59v768zM1851 
-64 q28 0 48.5 -19t20.5 -45v-128h-1920v128q0 26 20.5 45t48.5 19h1782z" /> 

按照提示创建marker symbols我试图

marker = new google.maps.Marker({ 
       position: myLatlng, 
       map: map, 
       icon: { 
        path: 'M960 1536l960 -384v-128h-128q0 -26 -20.5 -45t-48.5 
-19h-1526q-28 0 -48.5 19t-20.5 45h-128v128zM256 896h256v-768h128v768h256v- 
768h128v768h256v-768h128v768h256v-768h59q28 0 48.5 -19t20.5 -45v-64h- 
1664v64q0 26 20.5 45t48.5 19h59v768zM1851 -64 q28 0 48.5 -19t20.5 -45v-128h- 
1920v128q0 26 20.5 45t48.5 19h1782z' 
       } 
      }); 

但我没有得到银行的图标，只是一些奇怪的线条：

有谁知道为什么我在这里没有图标？这是否可能导致创建一个图标，如上所述？

Answer 1

您可以使用:before和:after选择器来实现。检查下面的答案。

body { 
 
    background-color: grey; 
 
} 
 
.marker { 
 
    position: relative; 
 
    display: inline-block; 
 
    background-color: #08c; 
 
    padding: 10px; 
 
    border-radius: 50%; 
 
    border: 5px solid #FFF; 
 
    color: #FFF; 
 
} 
 
.marker:before { 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: -14.5px; 
 
    left: calc(50% - 16px); 
 
    border-style: solid; 
 
    border-width: 16px 16px 0; 
 
    border-color: #fff transparent; 
 
    display: block; 
 
    width: 0; 
 
    z-index: -1; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" /> 
 

 
<div class="marker"> 
 
    <i class="fa fa-university" aria-hidden="true"></i> 
 
</div>

Answer 2

的路径似乎是垂直翻转（你还需要它的规模，你看行仅仅是一个真正的大图标的一部分）

固定路径：

M 0.19113133,-15.44788 16.905415,-8.7761997 v 2.223893 h -2.228571 q 0,0.4517349 -0.356919,0.7818476 -0.356919,0.3301132 -0.844418,0.3301132 h -26.568748 q -0.4875,0 -0.844421,-0.3301132 -0.35692,-0.3301127 -0.35692,-0.7818476 h -2.22857 v -2.223893 z M -12.066008,-4.3284126 h 4.4571411 V 9.0149371 h 2.228571 V -4.3284126 h 4.45714333 V 9.0149371 H 1.3054178 V -4.3284126 H 5.7625592 V 9.0149371 h 2.228573 V -4.3284126 H 12.448274 V 9.0149371 h 1.027233 q 0.487499,0 0.844418,0.3301126 0.356919,0.3301126 0.356919,0.7818463 v 1.111933 h -28.971426 v -1.111933 q 0,-0.4517337 0.35692,-0.7818463 0.356921,-0.3301126 0.844421,-0.3301126 h 1.027233 V -4.3284126 z M 15.704077,12.350789 q 0.4875,0 0.844418,0.330113 0.35692,0.330113 0.35692,0.781821 v 2.22392 h -33.428567 v -2.22392 q 0,-0.451708 0.356919,-0.781821 0.356919,-0.330113 0.844421,-0.330113 h 31.025889 z 

 function initialize() { 
 
     var mapOptions = { 
 
      zoom: 14, 
 
      center: new google.maps.LatLng(52.5498783, 13.425209099999961), 
 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
 
     }; 
 
     map = new google.maps.Map(document.getElementById('map_canvas'), 
 
      mapOptions); 
 
     marker = new google.maps.Marker({ 
 
       position: mapOptions.center, 
 
       map: map, 
 
       icon: { 
 
        xscale:.2, 
 
        fillColor:'#000000', 
 
        fillOpacity:.5, 
 
        path: 'M 0.19113133,-15.44788 16.905415,-8.7761997 v 2.223893 h -2.228571 q 0,0.4517349 -0.356919,0.7818476 -0.356919,0.3301132 -0.844418,0.3301132 h -26.568748 q -0.4875,0 -0.844421,-0.3301132 -0.35692,-0.3301127 -0.35692,-0.7818476 h -2.22857 v -2.223893 z M -12.066008,-4.3284126 h 4.4571411 V 9.0149371 h 2.228571 V -4.3284126 h 4.45714333 V 9.0149371 H 1.3054178 V -4.3284126 H 5.7625592 V 9.0149371 h 2.228573 V -4.3284126 H 12.448274 V 9.0149371 h 1.027233 q 0.487499,0 0.844418,0.3301126 0.356919,0.3301126 0.356919,0.7818463 v 1.111933 h -28.971426 v -1.111933 q 0,-0.4517337 0.35692,-0.7818463 0.356921,-0.3301126 0.844421,-0.3301126 h 1.027233 V -4.3284126 z M 15.704077,12.350789 q 0.4875,0 0.844418,0.330113 0.35692,0.330113 0.35692,0.781821 v 2.22392 h -33.428567 v -2.22392 q 0,-0.451708 0.356919,-0.781821 0.356919,-0.330113 0.844421,-0.330113 h 31.025889 z' 
 
       } 
 
      }); 
 
     } 
 

 
     google.maps.event.addDomListener(window, 'load', initialize);

html,body,#map_canvas{height:100%;margin:0;padding:0}

<div id="map_canvas"></div> 
 
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>

但是，它不可能达到预期的结果，因为您需要多个路径（但只有一条路径是可能的）。您将需要一个自定义的叠加（如https://github.com/googlemaps/js-rich-marker）使用fontawesome（的CSS的方法不会与本地的标记工作，因为它们是基于无论是复杂的<canvas/>或<img/> ......在那里::before/::after不适用）