时间戳

首页 > 解决方案 > 传单如何更改标记交互性

leaflet - 传单如何更改标记交互性

问题描述

我可以通过这种方式更改标记的交互性

const position = [x, y];
const map = L.map('map').setView(position, z);
L.tileLayer(url, options).addTo(map);
var marker = L.marker([x, y], { interactive: false }).addTo(map);

const button = document.getElementById("button");
let interactive = false;
button.onclick = () => {
    interactive = !interactive;
    marker.removeFrom(map);
    L.setOptions(marker, { interactive: interactive });
    marker.addTo(map);
};

在这里，我必须首先从地图中删除标记，第二次更改选项和第三次再次添加到地图。

有没有办法更改已添加到地图的现有标记的选项，而无需删除它并再次添加它？

标签： leaflet

解决方案

您可以直接调用对象。

let interactive = false;
button.onclick = () => {
    interactive = !interactive;
    marker.options.interactive = interactive;
};

或使用setStyle()，然后标记将被重新渲染：

let interactive = false;
button.onclick = () => {
    interactive = !interactive;
    marker.setStyle({interactive: interactive});
};

但我建议不要使用全局标志。因为你会成为一个问题，如果你想使用不止一个标记。

我会用这个：

button.onclick = () => {
    marker.options.interactive = !marker.options.interactive;
};

推荐阅读