在谷歌地图标记标签的字体真棒图标标记中放置一个数字

Posted 2023-03-28

【中文标题】在谷歌地图标记标签的字体真棒图标标记中放置一个数字

【英文标题】：Putting a number inside a font awesome icon marker for google maps marker label

【发布时间】：2019-03-17 07:41:48

【问题描述】：

我在下面有这个谷歌地图标记，我使用font awesome marker icon 作为标签/图标。但是使用 label 属性我不确定如何 a.) 为标记着色 b.) 在标记内输入一个数字。

我正在关注这个 SO link

这是我的代码

var marker = new google.maps.Marker(
  position: 
    lat: eventArray[0].Latitude,
    lng: eventArray[0].Longitude
  ,
  map: scope.map,
  label: 
    fontFamily: 'Fontawesome',
    text: '\uf041',
    color: '#008489' // this colors the text inside the label, not the marker color
  ,
);

【参考方案1】：

假设您要实现的是其中带有数字的 awesomefont 标记，您只需复制 SVG path of the awesomefont marker（单击下载并复制 SVG 路径，参见 license）并将其用作 icon。然后，您可以将其颜色更改为您想要的任何颜色。因为`label只输入你想要的文字/颜色。

html,
body,
#map 
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
<script>
  function init() 
    var map = new google.maps.Map(document.getElementById('map'), 
      zoom: 6,
      center: new google.maps.LatLng(51.509865, -0.118092)
    );
    var icon = 
        path: "M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0z", //SVG path of awesomefont marker
        fillColor: '#008489', //color of the marker
        fillOpacity: 1,
        strokeWeight: 0,
        scale: 0.09, //size of the marker, careful! this scale also affects anchor and labelOrigin
        anchor: new google.maps.Point(200,510), //position of the icon, careful! this is affected by scale
        labelOrigin: new google.maps.Point(205,190) //position of the label, careful! this is affected by scale
    

    var marker = new google.maps.Marker(
      position: map.getCenter(),
      map: map,
      icon: icon,
      label: 
        text: '3', //text inside marker
        color: '#FFFFFF', //color of the text inside marker
      ,
    );
  
  google.maps.event.addDomListener(window, 'load', init);
</script>

【参考方案2】：

试试这个：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    <i class="fas fa-map-marker-alt" style="font-size:60px;position:relative;color:red;"><p style="font-size:16px;position:absolute;margin:0px;paddind:0px;top:13px;left:19px;">3</p></i>

https://codepen.io/kalpeshshende/pen/BqZeVL

【讨论】：

那么这个链接标签会去哪里？

链接标签将进入头部标签。