leaflet 鼠标移动到图层时变_javascript – Leaflet.js：允许在地图DIV顶部使用HTML元素的默认拖动/缩放选项...

我正在使用一些javascript / css在Leaflet控制的地图上“绘制”我自己的DIV和IMG元素.我已经设法同步平移和缩放动作,所以看起来我自己的元素实际上是背景中地图的一部分.

唯一的主要背后：当我将鼠标放在我的自定义HTML元素上时,鼠标图标从“移动”图标变为默认指针,并且无法拖动或缩放地图.

有没有办法在页面上为maptile上的拖放控制提供特定的HTML元素？我不想在所有元素上使用它,其中一些需要提供不同类型的用户交互.

我还没有真正探索Leaflet的自定义图层系统.我假设这样的自定义图层的HTML元素也可能默认具有这些控件.但是有一些原因让我更喜欢将HTML元素放在地图上,与Leaflet div分开.

解决方法:

您应该使用L.control层,正如您所描述的那样,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,css,html5,leaflet,openstreetmap

来源： https://codeday.me/bug/20190628/1317519.html