Javascript expndtw-1.js:允许在map DIV顶部使用HTML元素进行默认的拖放/缩放选项
我正在使用一些javascript/css在传单控制的地图上“绘制”我自己的DIV和IMG元素。我已经成功地同步了平移和缩放运动,所以看起来我自己的元素实际上是背景中地图的一部分 唯一主要的背面:当我将鼠标放在自定义HTML元素上时,鼠标图标将从“移动”图标更改为默认指针,并且无法拖动或缩放地图 有没有一种方法可以像maptiles一样为页面上的特定HTML元素提供拖放和缩放控件?我不希望所有元素都这样,但其中一些元素需要提供不同类型的用户交互Javascript expndtw-1.js:允许在map DIV顶部使用HTML元素进行默认的拖放/缩放选项,javascript,css,html,leaflet,openstreetmap,Javascript,Css,Html,Leaflet,Openstreetmap,我正在使用一些javascript/css在传单控制的地图上“绘制”我自己的DIV和IMG元素。我已经成功地同步了平移和缩放运动,所以看起来我自己的元素实际上是背景中地图的一部分 唯一主要的背面:当我将鼠标放在自定义HTML元素上时,鼠标图标将从“移动”图标更改为默认指针,并且无法拖动或缩放地图 有没有一种方法可以像maptiles一样为页面上的特定HTML元素提供拖放和缩放控件?我不希望所有元素都这样,但其中一些元素需要提供不同类型的用户交互 我还没有真正探索过传单的自定义图层系统。我假设这些
我还没有真正探索过传单的自定义图层系统。我假设这些自定义层的HTML元素在默认情况下也可能有这些控件。但是有一些原因使我更愿意将HTML元素放在地图的顶部,与传单部分分开。您应该使用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());
你可以这样做;)