Question

我的页面有：

1）包含地图（Leaflet.js）和

的父div

2）包含可调整大小的矩形（Interactive.js）的子div，以便用户可以选择一个区域。

矩形＆＃34;层＆＃34;位于地图的顶部＆＃34;图层＆＃34;。

HTML：

<div id="map">
    <div class="selectBox">
    </div>
</div>

javascript（用于初始化Leaflet地图）：

var map = L.map('map').setView([0,0], 6);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18
    }).addTo(map);

javascript（用于使用Interact.js初始化交互式框）

interact('.selectBox')
.resizable({
preserveAspectRatio: false,
edges: { left: true, right: true, bottom: true, top: true }
})
.on('resizemove', function (event) {
var target = event.target,
    x = (parseFloat(target.getAttribute('data-x')) || 0),
    y = (parseFloat(target.getAttribute('data-y')) || 0);

// update the element's style
target.style.width  = event.rect.width + 'px';
target.style.height = event.rect.height + 'px';

target.style.webkitTransform = target.style.transform =
    'translate(' + x + 'px,' + y + 'px)';

target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
target.textContent = Math.round(event.rect.width) + '?' + Math.round(event.rect.height);
});

问题在于，当用户通过拖动其中一个边框来调整交互式矩形的大小时，后面的地图也会移动。根据我的理解，这是因为Leaflet和Interact都捕获了onclick事件。

我试过了：

.on('resizemove', function (event) {
(...)
event.stopPropagation()
event.stopImmediatePropagation()
(...)
}

但他们都没有工作。

是否有任何解决方案，以便在用户调整矩形大小时地图不会移动？

谢谢！

Answer 1

好的，我明白了..我发布了一个答案，以防有人遇到同样的问题：

以下传单方法（我不知道它们的存在）：

map.dragging.disable()
map.dragging.enable()

...结合以下Interact事件：

resizestart
resizeend

...给出解决方案：

.on('resizestart', function (event) {
map.dragging.disable();
})

.on('resizeend', function (event) {
map.dragging.enable();
})

使用Interact.js的Leaflet.js ---避免触发两个点击监听器

1 个答案: