使用标记图标只有很棒的字体,没有周围的气球

Question

我有这个代码工作正常,但我需要只显示图标,而不是带有阴影的"气球".

我尝试删除" 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;
}

Answer 1

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

其克隆版本和其他变体如Leaflet.extra-markers插件也是如此.

但你可以简单地使用传单DivIcon:

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

然后,您只需<div>使用Font Awesome图标填充该容器,就像在普通页面中一样,以及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>