我正在使用一些 javascript/css 在 Leaflet 控制的 map 上“绘制”我自己的 DIV 和 IMG 元素。我已经设法使平移和缩放运动同步,所以看起来我自己的元素确实是背景中 map 的一部分。
唯一的主要缺点:当我将鼠标放在我的自定义 HTML 元素上时,鼠标图标从“移动”图标变为默认指针,并且无法拖动或缩放 map 。
有没有办法为页面上的特定 HTML 元素提供拖动和缩放控件,就像在 maptiles 上一样?不过,我不希望在所有元素上都这样做,其中一些元素需要提供不同类型的用户交互。
我还没有真正探索过 Leaflet 的自定义图层系统。我假设此类自定义层的 HTML 元素在默认情况下也可能具有这些控件。但是出于一些原因,我更愿意将 HTML 元素放在 map 的顶部,与 Leaflet div 分开。
最佳答案
您应该使用 L.control 层,正如您所描述的那样,它是嵌入在 map 中的 HTML 元素,并且按照您所说的那样工作。
它们易于使用和使用 L.Control.extend 方法初始化。
这是一个例子:
var self = this;
var newButton;
L.Control.currentPosition = L.Control.extend({
onAdd: function (map) {
//this method is called when this new control is added later to your map
var className = 'your-custom-container-class',
container = L.DomUtil.create('div', className);
newButton = this._createButton(
'', 'your-button-title', 'your-custom-button-class', 'your-button-id', container, this.newButtonFunction, self);
return container;
},
newButtonFunction: function(ev){
},
_createButton: function (html, title, className, id, container, fn, context) {
var link = L.DomUtil.create('a', className, container);
link.innerHTML = html;
link.href = '#';
link.title = title;
link.id = id;
var stop = L.DomEvent.stopPropagation;
L.DomEvent
.on(link, 'click', stop)
.on(link, 'mousedown', stop)
.on(link, 'dblclick', stop)
.on(link, 'click', L.DomEvent.preventDefault)
.on(link, 'click', fn, context);
return link;
}
});
//finally add the new control to your map object
this.map.addControl(new L.Control.newButton());
你可以这样做 ;)
关于javascript - 传单.js : Allow default drag/zoom options with HTML elements on top of map DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29859145/