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

Question

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

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

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