使用仅带有真棒字体的标记图标,没有周围的气球
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: '© <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 你应该接受这个答案!以上是关于使用仅带有真棒字体的标记图标,没有周围的气球的主要内容,如果未能解决你的问题,请参考以下文章