js嵌入到html中可用什么标记,javascript – 将数据属性添加到leaflet.js标记元素

目标：将数据属性添加到leaflet.js标记元素标记

我有一个带有地图和“聚光灯”区域的项目.

使用leaflet.js使用位置填充地图

当我点击地图上的一个图钉时,我希望它的相应图像和信息出现在聚光灯区域.

我做了一个没有地图的初步测试：http://codepen.io/sheriffderek/pen/yOmjLV我使用数据归因于连接硬币的两面. (一组数据由PHP吐出,地图数据是API ajax调用)

我理所当然地认为它是一个可访问的选项来添加类或Id或数据或rel等.以下是它的内容：

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

});

我可以为对象添加一个“选项”和一个唯一值 – 但这并没有帮助我在标记中添加一些内容.

标记的元素最终如下：

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;">

试图得到更像这样的东西：

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,0px); z-index: 140;">

我研究了一下 – 大多数问题都是2014年或更早.希望新文档中缺少某些内容.