- iOS/Objective-C 元类和类别
- objective-c - -1001 错误,当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
目标:将数据属性添加到 leaflet.js 标记元素标记
我有一个带有 map 和“聚光灯”区域的项目。
map 使用 leaflet.js 填充位置
当我点击 map 上的某个图钉时,我想让它对应的图像和信息出现在聚光灯区域。
我在没有 map 的情况下进行了初步测试:http://codepen.io/sheriffderek/pen/yOmjLV我在哪里使用数据属性来连接硬币的两侧。 (一组数据由PHP吐出, map 数据为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
});
我可以为对象添加一个“选项”和一个唯一值,但这并不能帮助我在标记中添加一些东西。
标记的元素最终是这样的:
<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 年或更早的。希望新文档中缺少一些东西。
最佳答案
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
属性。
首先:阅读 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;
}
}
});
您应该能够从那里解决。
关于javascript - 将数据属性添加到 leaflet.js 标记元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37782930/
我正在尝试实现类似于 Leaflet.buffer 的缓冲区在我的 map 上。然而,Leaflet.buffer 似乎只适用于 Leaflet.Draw。 我正在使用 Leaflet Editabl
我正试图摆脱 Google map ,因为我受够了他们现在的速度有多慢!我决定试一试 Leaflet,这似乎是个不错的选择。下面是我的代码: initMap(); function initMap()
在 Leaflet 中,是否可以使用 {clickable:false} 定义标记或折线,以便点击传递到下方的任何内容 - 无论是 map 还是可点击的几何对象? 目前我通过使标记/折线可点击并自己传
我正在结合 Leaflet 使用 HTML map 进行一些测试。 .服务器端我有一个 Ruby Sinatra 应用程序,它提供由 MySQL 表获取的 json 标记。使用 2k-5k 和可能更多
我无法使用Leaflet(0.7.7)/Leaflet.Draw(latest)将Layer属性转换为GEOJson对象的属性。我的工作流程是: 1创建 map :var map = L.map('#
我正在使用使用传单 api 的应用程序。 简介 我需要绘制不同类型的围栏,使用装饰器我可以在一定程度上为折线应用良好的视觉效果,但不多。 问题 我愿意显示双绞线而不是破折号、点或普通线,我知道双绞线将
我在我的应用程序中使用 WebView 来显示 Leaflet map 。 在 HTML 文件中,我有以下信用和链接: L.tileLayer('https://api.tiles.mapbox.co
我正在使用https://github.com/Leaflet/Leaflet.draw插件,并且试图检索已编辑图层的图层类型。 在draw:created事件中,我有layer和layerType,
我的左下角有缩放控件和比例尺。 我遇到的问题是,当我的 map 在移动设备上旋转时,它们与左上角的自定义控制面板重叠。 那么如何使比例尺水平位于缩放控件旁边? 最佳答案 您可以通过更改比例控件的 CS
我想计算标记的高度,但我在传单中没有找到任何解决方案。我找到了海拔插件,它允许在 map 上绘制海拔剖面图,但我不需要它。你知道如何计算高度吗?谢谢。 最佳答案 编辑:一个不错的选择 为任何可能需要它
我明白我可以使用通用Leaflet layer ,以及更高级的 map 框 featureLayer ,它提供了作为过滤器的有用功能。但是,我不明白两者之间的区别 marker = L.Marker
我正在尝试在 Render mapbox vector tiles inside react-leaflet? 中描述此实现工作,除了我使用的是 TypeScript。 所以我的文件看起来像这样: i
我正在尝试将我的点在 map 上的正确位置作为 Latlng: let point = L.point(0,0) // x=0,y=0 let latlng = map.unproject(point
我正在使用 Leaflet.VectorGrid用于在传单 map 上加载 pbf 矢量切片的插件。我检索矢量切片的 API 需要传递授权 header 。在 Mapbox GL js 中,这可以通过
我们有一张 map ,在某个缩放级别,我们开始对标记进行聚类。 现在我希望能够删除某些标记。我可以删除不参与集群的标记,但集群中的标记不会被删除,因为代码不会遍历它们。 我会发布代码,但它无处不在,而
我仅在同一位置的标记上进行聚类(即 maxClusterRadius = 0)。单击集群时,我希望它以特定的缩放级别(不是最大缩放)居中并放大,然后立即 spiderfy。使用以下代码,spiderf
使用 Leaflet javascript。我希望我的“清除按钮”能做两件事... 1) 取消选中所有 L.Control 层2) 从 map 中移除当前叠加层 我可以使用这段代码轻松完成第一个: v
我正在开发一个包含大量标记的应用程序,并希望将它们聚类。我找到了 Leaflet.markercluster,它做得很好。但是,我想自定义标记的聚类。具体来说,我想根据标记所在的国家/地区对我的标记进
有点奇怪,希望有人能帮忙。 在传单中,一旦用户输入了纬度/经度并向 map 添加了一个点,我希望能够在该点周围添加一个 10 公里的正方形。 我已经尝试四处寻找计算以找到 x 公里外的正方形的角,但没
我在 leaflet.js 中创建了一个具有多个图层的 map ,但无法弄清楚如何切换一个图层以最初显示在 map 上。 Here is the link 我确信它相当简单,但就是无法弄清楚。 最佳答
我是一名优秀的程序员,十分优秀!