使用仅带有真棒字体的标记图标,没有周围的气球

Posted

技术标签:

【中文标题】使用仅带有真棒字体的标记图标,没有周围的气球【英文标题】:Use marker icon with only awesome fonts, no surrounding balloon 【发布时间】:2018-08-12 11:45:42 【问题描述】:

我的代码可以正常工作,但我只需要显示图标而不是带有阴影的“气球”。

我已尝试删除“markerColor...”,但这只会更改为默认的蓝色标记/气球。

如何只显示图标及其大小和颜色?

pointToLayer: function(feature, latlng) 
  var con = feature.properties.concept;

  var hub;

  // icons for XX, YY and ZZ 
  if (kon === 'XX') 
    hub = new L.marker(latlng, icon: L.AwesomeMarkers.icon(icon: 'truck', prefix: 'fa', markerColor: 'cadetblue') );
   else if (kon === 'YY') 
    hub = new L.marker(latlng, icon: L.AwesomeMarkers.icon(icon: 'envelope', prefix: 'fa', markerColor: 'blue') );
   else if (kon === 'ZZ') 
    hub = new L.marker(latlng, icon: L.AwesomeMarkers.icon(icon: 'bicycle', prefix: 'fa', markerColor: 'darkblue') );
   else 
    hub = new L.marker(latlng, icon: L.AwesomeMarkers.icon(icon: 'envelope-o', prefix: 'fa', markerColor: 'red') );
  
  return hub;

【问题讨论】:

【参考方案1】:

不幸的是,Leaflet.awesome-markers 插件没有为您提供显示内部图标(来自 Font Awesome 或任何来源)没有周围气球的选项。 p>

cloned version 和 Leaflet.extra-markers 插件等其他变体也是如此。

但您可以非常简单地使用 Leaflet DivIcon

表示使用简单<div> 元素而不是图像的标记的轻量级图标。从Icon 继承,但忽略iconUrl 和阴影选项。

然后你只需用你的 Font Awesome 图标填充 <div> 容器,就像在普通页面中一样,以及 Leaflet.awesome-markers 插件为你做的事情:

L.marker(latlng, 
  icon: L.divIcon(
    html: '<i class="fa fa-truck" style="color: red"></i>',
    iconSize: [20, 20],
    className: 'myDivIcon'
  )
);

请注意,您还必须指定一些 CSS 以根据需要对其进行自定义:

.myDivIcon 
  text-align: center; /* Horizontally center the text (icon) */
  line-height: 20px; /* Vertically center the text (icon) */

例子:

var map = L.map('map').setView([48.86, 2.35], 11);

L.marker([48.86, 2.35], 
  icon: L.divIcon(
    html: '<i class="fa fa-truck" style="color: red"></i>',
    iconSize: [20, 20],
    className: 'myDivIcon'
  )
).addTo(map);

L.tileLayer('https://s.tile.openstreetmap.org/z/x/y.png', 
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
).addTo(map);
.myDivIcon 
  text-align: center; /* Horizontally center the text (icon) */
  line-height: 20px; /* Vertically center the text (icon) */
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet.awesome-markers@2.0.4/dist/leaflet.awesome-markers.css" />
<script src="https://unpkg.com/leaflet.awesome-markers@2.0.4/dist/leaflet.awesome-markers.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">

<div id="map" style="height: 180px"></div>

【讨论】:

这是最好的答案。救了我很多挫折。 @QGIS-user 你应该接受这个答案!

以上是关于使用仅带有真棒字体的标记图标,没有周围的气球的主要内容,如果未能解决你的问题,请参考以下文章

setState 不更新字体真棒图标

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

在 :hover 上更改字体真棒图标

字体真棒图标没有出现

字体真棒没有出现在浏览器中

单击带有字体真棒图标的按钮时,表单不提交