如何使用字体真棒作为传单中的图标而不是标记答案

【问题标题】：How to use font awesome as an icon in leaflet instead of marker如何使用字体真棒作为传单中的图标而不是标记
【发布时间】：2018-09-02 11:43:54
【问题描述】：

在这段代码中，我使用data[key].category 来指示相关图标作为标记。但我想用字体真棒图标替换它，使其在运行时轻量级，在某些地方可能会加载数十个图标作为标记

var Cofee= Leaflet.icon({
      iconUrl: '/img/Coffee.png',
      shadowUrl: '/img/pale-shadow.png',
      iconSize: [34, 49], 
      shadowSize: [49, 49],
      iconAnchor: [5, 62],
      shadowAnchor: [4, 62],
      popupAnchor: [12, -30]
});
var Store= Leaflet.icon({
      iconUrl: '/img/Store.png',
      shadowUrl: '/img/pale-shadow.png',
      iconSize: [34, 49], 
      shadowSize: [49, 49],
      iconAnchor: [5, 62],
      shadowAnchor: [4, 62],
      popupAnchor: [12, -30]
});
..
..
..

this.Getlatlng(currentlatlng, 9000).then(data => {
    for (var key in data) {
        Leaflet.marker(data[key].location, { icon: data[key].category })      
         .addTo(this.map).bindPopup('<h4>'+data[key].caption+'</h4>');
          markers.push([data[key].location.lat,data[key].location.lng]);
}

【问题讨论】：

标签： javascript css leaflet font-awesome

【解决方案1】：

您可以使用字体很棒的图标而不是像这样的内置标记图标：

const fontAwesomeIcon = L.divIcon({
    html: '<i class="fa fa-map-marker fa-4x"></i>',
    iconSize: [20, 20],
    className: 'myDivIcon'
});

L.marker([51.5, -0.09],{ icon:  fontAwesomeIcon}).addTo(map)
    .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')

const map = L.map('mapid').setView([51.505, -0.09], 8);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

const fontAwesomeIcon = L.divIcon({
  html: '<i class="fa fa-map-marker fa-4x"></i>',
  iconSize: [20, 20],
  className: 'myDivIcon'
});

L.marker([51.5, -0.09], {
    icon: fontAwesomeIcon
  }).addTo(map)
  .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')

#mapid {
  height: 100vh;
}

body {
  margin: 0px;
}

.leaflet-popup-close-button {
  display: none;
}

.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.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>

<div id="mapid"></div>

【讨论】：

谢谢，这对fa-map-marker 有效，但对其他人来说，它的 int 有效。我试过fa、fab 和fas 例如：<i class="fas fa-address-book"></i> 这不是。
它可以工作 jsfiddle.net/9aheo6xb 你不应该使用 fas 而应该使用 fa class for font-awesome version 4.7.0。
可以指定颜色吗？
我遇到了偏移问题。标记的尖端不在行起点上。 => 如何正确设置iconAnchor？

【解决方案2】：

kboul 的回答是一个非常适合我的非常简单的解决方案。此外......这是我随后将代码应用于geojson点数据的使用方式。在这种情况下，我在叠加地图中使用 geojson。

var clinics = L.geoJson(clinicData, {
  pointToLayer: function (feature, latlng) {
    return L.marker(latlng, { icon: fontAwesomeIcon });
  },
});

【讨论】：