Как я могу предоставить привязку к HTML-элементу, используемому в качестве значка?- Leaflet JS - PullRequest
Новая
       17

Как я могу предоставить привязку к HTML-элементу, используемому в качестве значка?- Leaflet JS

0 голосов
/ 03 января 2019

Я настраиваю приложение карты, которое динамически загружает маркеры из базы данных и показывает их на карте, у каждого маркера есть собственный значок, который отображается с использованием опции «html» внутри объекта L.Divicon. Как установить привязку значка, так как значок - это не файл изображения, а элемент HTML внутри кружка Bootstrap? (Мне нужно создать иконку таким образом по другим причинам)

Я пытался настроить параметры iconsize / iconanchor так же, как и для изображения значка. Но увеличение и уменьшение карты меняет местоположение маркера. 

var markers = [];
var image = 'https://upload.wikimedia.org/wikipedia/commons/b/bf/Inveraray_Castle_-_south-west_facade.jpg';
var image2 = 'https://mfas3.s3.amazonaws.com/styles/grid-3_thumbnail_retina/s3/wickermansfw.jpg?itok=UH3cbzhO';
  var marker1 = L.marker([57.444051,-2.794932], {
    icon: L.divIcon({
     html: '<i class="far fa-hammer fa-3x"></i>',
     iconSize:     [60, 60], // size of the icon
     iconAnchor:   [30, 60], // point of the icon which will correspond to marker's location
     popupAnchor:  [0, -50], // point from which the popup should open relative to the iconAnchor
     className: 'myDivIcon'
   }),
   image:image2,
      title: 'Huntly Toon',
      type: 'Yard'
    } // Add a title
  )

  var marker = L.marker([57.140956, -2.119276], {
    icon: L.divIcon({
     html: '<i class="far fa-flask fa-3x"></i>',
     iconSize:     [60, 60], // size of the icon
     iconAnchor:   [30, 60], // point of the icon which will correspond to marker's location
     popupAnchor:  [0, -50], // point from which the popup should open relative to the iconAnchor
     className: 'myDivIcon'
   }),

      image: image,
      title: 'Jamies Flat',
      type: 'Lab'
    } // Add a title            // Adjust the opacity
  )



  marker.bindPopup(createPopupContent(marker),customOptions).addTo(map).on('click', showInfo);
  marker1.bindPopup(createPopupContent(marker1),customOptions).addTo(map).on('click', showInfo);
  L.DomUtil.addClass(marker._icon, 'img-circle fa-stack marker');
  L.DomUtil.addClass(marker1._icon, 'img-circle fa-stack marker');

Поскольку значок отображается на странице как элемент 60x60, я ожидал, что код будет работать с привязкой значков и всплывающими подсказками. Но, как уже говорилось, значок перемещается по карте без привязки к ней.

...