Question

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

我有一个带有地图和聚光灯的项目＆＃39;区域。

使用leaflet.js

填充地图

当我点击地图上的图钉时，我想让它的相应图像和信息出现在聚光灯区域。

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

我理所当然地认为这是一个可以选择添加课程，ID或数据或者等等。以下是它的内容：

// 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
});

我可以添加一个＆＃39;选项＆＃39;对于对象来说，这是一个独特的价值，但这并不能帮助我获得标记。

标记的元素最终如下：

<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

我可以添加一个＆＃39;选项＆＃39;对于对象来说，这是一个独特的价值，但这并不能帮助我获得标记。

没错 - Leaflet不会将选项神奇地转换为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;
        }
    }

});

你应该可以从那里开始工作。

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

1 个答案: