使用标记图标，仅带有超棒的字体，周围没有气球 [英] Use marker icon with only awesome fonts, no surrounding balloon

问题描述

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

I have this code that works fine, but I need to get only the icon to show and not the "balloon" with its shadow.

我尝试删除" markerColor ..."，但这只是更改为默认的蓝色标记/气球.

I have tried with removing "markerColor..." but that is only changing to the default blue marker / balloon.

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

How to only show the icon and its size and color?

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;
}

推荐答案

不幸的是， Leaflet.awesome-标记插件无法为您提供仅显示 内部图标(来自Font Awesome或其他来源)而没有周围气球的选项.

Unfortunately, Leaflet.awesome-markers plugin does not offer you the option to display only the inner icon (from Font Awesome or whatever source) without the surrounding balloon.

与克隆版本以及其他变体(如

Same for its cloned version and other variations like Leaflet.extra-markers plugin.

但是您可以非常简单地使用传单 DivIcon 代替:

But you can very simply use a Leaflet DivIcon instead:

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

Represents a lightweight icon for markers that uses a simple <div> element instead of an image. Inherits from Icon but ignores the iconUrl and shadow options.

然后，您只需用Font Awesome图标填充该< div> 容器，就像在普通页面中一样，并且在Leaflet.awesome-markers插件在罩住你:

Then you simply fill that <div> container with your Font Awesome icon, the same way you would do it in a normal page, and what the Leaflet.awesome-markers plugin does under the hood for you:

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

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

Note that you also have to specify a bit of CSS to customize it as you wish:

.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>

这篇关于使用标记图标，仅带有超棒的字体，周围没有气球的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！