Добавить данные атрибута leaflet.js маркер элемента

Question

ЦЕЛЬ: Добавить данные-атрибут leaflet.js Marker элемент разметки

У меня есть проект с картой и «прожектора» области.

Карта заполняется местах с использованием leaflet.js

Когда я нажимаю булавку на карте, я хочу иметь это соответствующее изображение и информация отображается в области прожектора.

Я сделал предварительный тест без карты: http://codepen.io/sheriffderek/pen/yOmjLV Где я использовал данные, связанные с подключением двух сторон монеты. (один набор данных выплевывается PHP, а данные карты - это вызов ajax API)

Я счел само собой разумеющимся, что это будет доступная опция для добавления классов или идентификаторов или данных или данных и т. д. Вот мясо это:

// Purveyor types - for query endpoints 
var bar = 4; 
var retailer = 3; 

// Create the "map" 
var onSiteMap = L.map('on-site-map').setView([34.0758661, -118.25430590], 13); 

// Define the pin (no SVG?) 
var onSiteIcon = L.divIcon({ 
    className: 'my-div-icon' // this gets one class name as far as I can tell 
}); 

// Setup map "Look" 
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(onSiteMap); 

// Grab the data 
$.ajax({ 
    url: 'http://xxxxxx.com/wp-json/wp/v2/purveyor?purveyor-type=' + bar, 
    success: function (data) { 
    var purveyorData = data; 
    for (var i = 0; i < data.length; i++) { 
     var ourLat = purveyorData[i].acf.purveyor_latitude; 
     var ourLong = purveyorData[i].acf.purveyor_longitude; 
     var ourSlug = purveyorData[i].slug; 
     // create the markers 
     L.marker([ ourLat , ourLong ], { 
     icon: onSiteIcon, 
     slug: ourSlug // creates an extra option... but... 
     }).addTo(onSiteMap); 
    } 
    }, 
    cache: false 
}); 

Я могу добавить «вариант» и уникальное значение для этого - к объекту, но это не поможет мне получить что-то в разметке.

Элемент для маркеров заканчивается так:

<div 
    class="leaflet-marker-icon my-div-icon leaflet-zoom-animated leaflet-clickable" 
    tabindex="0" style="margin-left: -6px; margin-top: -6px; width: 12px; height: 12px; transform: translate3d(276px, 140px, 0px); z-index: 140;"></div> 

Попытка получить что-то больше, как это:

<div 
    id='possible-id-237' 
    rel='possible-rel' 
    data-name='this-slug' 
    class="leaflet-marker-icon my-div-icon leaflet-zoom-animated leaflet-clickable" 
    tabindex="0" style="margin-left: -6px; margin-top: -6px; width: 12px; height: 12px; transform: translate3d(276px, 140px, 0px); z-index: 140;"></div> 

Я исследовал немного - и большинство вопросы были 2014 года или старше. Надеюсь, что в новых документах мне чего-то не хватает.

Answer 1

Я могу добавить для объекта «вариант» и уникальное значение для этого объекта, но это не помогает мне получить что-то в разметке.

Это право - листок не будет волшебным образом превращать параметры в HTML data атрибутов.

Первый: прочитайте leaflet code! Это легко понять, если вы потратите немного времени на это. Для маркеров HTML действительно построен в L.Icon, а не в L.Marker.

После того, как вы сделали это, вы заметите код в src/layer/marker/icon.js делает что-то вроде:

_setIconStyles: function (img, name) { 
    var options = this.options; 

    if (options.something) { 
     img.style.something = something(something); 
    } 
}, 

Если вы затем прочитать Leaflet's plugin guide, вы тогда понимаете, что вы можете сделать плагин в линиях :

L.Icon.DataMarkup = L.Icon.extend({ 

    _setIconStyles: function(img, name) { 
     L.Icon.prototype._setIconStyles.call(this, img, name); 

     if (options.slug) { 
      img.dataset.slug = options.slug; 
     } 
    } 

}); 

Вы должны уметь отлаживать его оттуда.