将数据属性添加到leaflet.js标记元素 [英] Add data attribute to leaflet.js marker element
问题描述
目标:将数据属性添加到leaflet.js标记元素标记
GOAL: Add data-attribute to leaflet.js marker element markup
我有一个带有地图和聚光灯"区域的项目.
I have a project with a map and a 'spotlight' area.
使用leaflet.js在地图上填充位置
The map is populated with locations using leaflet.js
当我单击地图上的图钉时,我希望它的对应图像和信息出现在聚光灯区域.
When I click a pin on the map, I want to have it's corresponding image and information appear in the spotlight area.
我做了没有地图的初步测试: http://codepen.io/sheriffderek/pen/yOmjLV 在这里我使用了归因于数据的数据来连接硬币的两面. (PHP吐出了一组数据,而地图数据是API ajax调用)
I did a preliminary test with no map: http://codepen.io/sheriffderek/pen/yOmjLV Where I used data-attributed to connect the 2 sides of the coin. ( one set of data is spit out by PHP and the map data is an API ajax call )
我认为添加类或ID或数据或rel等将是一种可访问的选项.这是它的实质:
I took for granted that it would be an accessible option to add classes or Id's or data or rel etc. Here's the meat of it:
// 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
});
我可以为对象添加一个选项"和一个唯一的值,但这并不能帮助我将某些东西添加到标记中.
I can add an 'option' and a unique value for that - to the object, but that doesn't help me get something into the markup.
标记的元素最终如下所示:
The element for the markers ends up like this:
<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>
试图得到更多类似的东西:
Trying to get something more like this:
<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年或更早.希望新文档中缺少我的东西.
I've researched a bit - and most questions were 2014 or older. Hoping there is something I'm missing in the new docs.
推荐答案
我可以为对象添加一个选项"和一个唯一的值,但这并不能帮助我将某些东西添加到标记中.
I can add an 'option' and a unique value for that - to the object, but that doesn't help me get something into the markup.
是的-Leaflet不会神奇地将选项转换为HTML data
属性.
That's right - Leaflet won't magically turn options into HTML data
attributes.
首先:阅读传单代码!如果您花一些时间,这很容易理解.对于标记,HTML实际上是内置在L.Icon
中,而不是内置在L.Marker
中.
First: read the leaflet code! It's easy to understand if you spend a bit of time in it. For markers, the HTML is really built in L.Icon
, not in L.Marker
.
完成此操作后,您会注意到src/layer/marker/icon.js
中的代码会执行以下操作:
Once you've done that, you'll notice the code in src/layer/marker/icon.js
does something like:
_setIconStyles: function (img, name) {
var options = this.options;
if (options.something) {
img.style.something = something(something);
}
},
如果您随后阅读了 Leaflet的插件指南,则说明然后您将意识到您可以按照以下方式制作一个插件:
If you then read Leaflet's plugin guide, you'll then realise you can make a plugin in the lines of:
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;
}
}
});
您应该可以从那里解决它.
You should be able to work it out from there.
这篇关于将数据属性添加到leaflet.js标记元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!