как использовать потрясающую библиотеку иконок в листовке - PullRequest
Новая
       16

как использовать потрясающую библиотеку иконок в листовке

0 голосов
/ 17 июня 2019

Я пытаюсь использовать библиотеку потрясающих иконок с листовкой. Я включаю эти библиотеки, а также загрузчик, как показано ниже: 

<link rel="stylesheet" href="~/lib/leaflet/leaflet.css" />
<link rel="stylesheet" href="~/lib/Leaflet.awesome-markers/leaflet.awesome- 
markers.css" />
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font- 
awesome.css" rel="stylesheet">
<link 
 href="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
rel="stylesheet">
<script src="~/lib/leaflet/leaflet.js"></script>
<script src="~/lib/Leaflet.awesome-markers/leaflet.awesome-markers.js"> 
</script>


var mymap = L.map('Lmap').setView([41.607116, 2.286993], 10);

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    fadeAnimation: false,
    zoomAnimation: false,
    markerZoomAnimation: false,
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
}).addTo(mymap);


var redMarker = L.AwesomeMarkers.icon({
    icon: 'coffee',
    markerColor: 'red'
});

var yellowMarker = L.AwesomeMarkers.icon({
    icon: 'star',
    markerColor: 'orange'
});

var greenMarker = L.AwesomeMarkers.icon({
    icon: 'spinner',
    markerColor: 'green'
});

    var markers = [
    L.marker([41.349412, 2.151421], {
        title: 'Martainer',
        id: '1',
        icon: redMarker
    }).addTo(mymap).bindPopup('<b>Localización: </b> Martainer' + '<br /><b>Tipo: </b> Contador de ejes'),
    L.marker([41.580323, 2.285579], {
        title: 'Granollers',
        id: '5',
        icon: greenMarker
    }).addTo(mymap).bindPopup('<b>Localización: </b> Granollers' + '<br /><b>Tipo: </b> Contador de ejes'),
    L.marker([42.858531, -2.682275], {
        title: 'Vitoria',
        id: '7',
        icon: yellowMarker
    }).addTo(mymap).bindPopup('<b>Localización: </b> Vitoria' + '<br /><b>Tipo: </b> Contador de ejes')
]

Моя проблема в том, что я просто вижу несколько иконок, таких как дом или начало ... Я хотел бы видеть все значки, которые, как сказано, я смогу использовать. Почему я не могу использовать, например, поезд? Как мне это сделать? Должен ли я загрузить эти иконки в свой проект? Я следую за этими шагами: https://github.com/sigma-geosistemas/Leaflet.awesome-markers Спасибо

1 Ответ

2 голосов
/ 17 июня 2019

Попробуйте добавить свойство prefix как fa

Примечание: prefix по умолчанию glyphicon

var mymap = L.map('Lmap').setView([41.607116, 2.286993], 10);

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 18,
  fadeAnimation: false,
  zoomAnimation: false,
  markerZoomAnimation: false,
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
}).addTo(mymap);


var redMarker = L.AwesomeMarkers.icon({
  icon: 'coffee',
  markerColor: 'red',
  prefix: 'fa'
});

var yellowMarker = L.AwesomeMarkers.icon({
  icon: 'train',
  markerColor: 'orange',
  prefix: 'fa'
});

var greenMarker = L.AwesomeMarkers.icon({
  icon: 'spinner',
  markerColor: 'green',
  prefix: 'fa',
  spin: true
});

var markers = [
  L.marker([41.349412, 2.151421], {
    title: 'Martainer',
    id: '1',
    icon: redMarker
  }).addTo(mymap).bindPopup('<b>Localización: </b> Martainer' + '<br /><b>Tipo: </b> Contador de ejes'),
  L.marker([41.580323, 2.285579], {
    title: 'Granollers',
    id: '5',
    icon: greenMarker
  }).addTo(mymap).bindPopup('<b>Localización: </b> Granollers' + '<br /><b>Tipo: </b> Contador de ejes'),
  L.marker([42.858531, -2.682275], {
    title: 'Vitoria',
    id: '7',
    icon: yellowMarker
  }).addTo(mymap).bindPopup('<b>Localización: </b> Vitoria' + '<br /><b>Tipo: </b> Contador de ejes')
]
#Lmap {
  position: absolute;
  top: 35px;
  left: 0;
  width: 100%;
  height: 80%
}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.min.js"></script>

<div id="Lmap"></div>
...