禁用Leaflet中CircleMarker双击缩放地图功能

Question

我试图在点击CircleMarker对象时禁用地图的缩放，但是到目前为止没有成功。

这是我的代码：

var myCircle = new L.CircleMarker(new L.LatLng(50.924480, 10.758276), 10).addTo(map);
myCircle.on("click", function () {
    //my click stuff
});
myCircle.on("dblclick", function () {
    //my dblclick stuff
});

每次触发dblclick事件时，地图都会缩放，如何禁用它？

- vaibhav shah

Answer 1

尝试

var myCircle = new L.CircleMarker(new L.LatLng(50.924480, 10.758276), 10).addTo(map);
map.doubleClickZoom.disable(); 

请参考此文档

- user1969752

---

如果我理解正确，这将完全禁用地图的双击缩放功能。这是OP想要的吗？我以为他只是想在双击标记时禁用双击缩放。 - Suma

Answer 2

以下所有答案都基于Leaflet地图对象已初始化。

我认为在地图对象初始化过程中，您也可以禁用双击缩放。

注意：这将禁用整个地图的双击缩放功能，而不仅仅是圆形标记。

map = L.map('map', {
      center: [39.8282, -98.5795],
      zoom: 5,
      doubleClickZoom: false
    });

补充说明：我正在使用leaflet版本1.7.1

- TheGreatestHacker

---

同样适用于mapboxgl。比已接受的答案更好，因为它仅禁用缩放功能。 - Erik W

但这将永久禁用双击缩放，这不在问题的范围内。 - keul

Answer 3

以上的答案均不适用于我：

• 调用本地 ev.originalEvent.preventDefault() 没有任何效果
• 返回 false 也是如此
• 我不太喜欢 doubleClickZoom 的解决方法（尽管它起作用！）

使用 Leaflet DomEvent 为我完成了工作：

import { DomEvent } from 'leaflet';

myFeature.on("dblclick", function (ev) {
  DomEvent.stopPropagation(ev)
});

- keul

---

这是唯一对我有效的方法。在直接使用Leaflet库时，使用L.DomEvent.stopPropagation(ev)。 - erikvimz

Answer 4

以下解决方案对我有效：

myCircle.ondblclick = function (event) {
    event.stopPropagation();
    return false;
};

我还尝试了另一种方法，在实践中也运行得相当不错，但我觉得它有些不太正规：

myCircle.on("click", function () {
  map.doubleClickZoom.disable();
  setTimeout(function(){map.doubleClickZoom.enable();}, 1000);
});

- Suma

Answer 5

如果有人在这里寻找“我想在双击地图时放大，但如果双击发生在实体上，则不要放大”的解决方案，请看以下内容，这是我的解决方法：

const circle = new L.circlemarker(...).addTo(map);
circle.on("dblclick", () => {
  map.doubleClickZoom.disable();

  doSomething();

  setTimeout(() => {
    map.doubleClickZoom.enable();
  }, 1); // Without the timeout the map will still zoom in on entity double-click
});

提醒一下，对于我来说，在“dblclick”处理程序中使用的 event.preventDefault();、event.stopPropagation(); 和 return false; 并没有起到作用。

- vobango

Answer 6

您可以在双击处理程序中使用return false，这将停止事件传播，例如：

myCircle.on("dblclick", function () {
    //my dblclick stuff
    return false;
});

现在其他元素（如地图）将不会处理该事件

- lee penkman

Answer 7

尝试这个... 当鼠标悬停在圆圈上时禁用 map.doubleClickZoom，当离开时启用。

var myCircle = new L.CircleMarker(new L.LatLng(50.924480, 10.758276), 10).addTo(map);

myCircle
    .on("click", function () {
        //my click stuff
    })
    .on("dblclick", function () {
        //my dblclick stuff
    })
    .on('mouseover', function () {
        map.doubleClickZoom.disable();
    })
    .on('mouseout', function () {
        map.doubleClickZoom.enable();
    });

- luisbello30

Answer 8

首先，您需要禁用地图双击缩放，然后在地图单击事件上重新启用它。因此，在双击标记后再双击地图时，它会再次缩放 ;) 我已经尝试过了，对我来说完美无缺！享受吧！

map.doubleClickZoom.disable();

map.on('click', function (e) { 
  map.doubleClickZoom.enable();
 });

- anonymous anonymous

---

这将使其在1次点击后永久启用。这个功能是如何完美运作的？ - dimitris93