使传单标记不可交互但可搜索

Question

所以我使用 Leaflet Search 和一堆不可见的传单标记来引用一堆街道名称，这样用户就可以更轻松地找到街道位置和离这些街道位置最近的标记，问题是是以下;用户不应该看到的我的不可见标记掩盖了用户应该看到并能够点击的实际可见标记。

这是我为不可见标记编写的代码（您可以忽略变量 iconLocation，因为它基本上只是一个不可见的图标）：

// Icons
var iconLocation = L.icon({
    iconUrl: '../assets/images/map/blips/Blip-Blank.png',
    iconSize: [32, 32],
    popupAnchor: [0,0],
});

// Read JSON Streets File
readTextFile('../assets/js/views/map/streets.json', function (text) {
    dataStreets = JSON.parse(text);

    // Populate map with invisible street markers
    for (i in dataStreets) {
        var title = dataStreets[i].title,   //value searched
            loc = dataStreets[i].loc,       //position found
            marker = new L.Marker(new L.latLng(loc), {title: title}, {icon: iconLocation} );//se property searched
        marker.setOpacity(0);
        markersLayer.addLayer(marker);
    }
});

现在，如果我将 { interactive: false } 放入 L.Marker 函数中，它将导致搜索函数出错并出现以下错误：

Uncaught TypeError: Cannot read property 'properties' of undefined

代码迷们有什么想法吗？

Answer 1

您想在设置标记时使用标记选项之一来设置 Z-Index

            marker = new L.Marker(new L.latLng(loc), {title: title, zIndexOffset: 1000}, {icon: iconLocation} );

这会将此图层设置在您需要的图层之上。

选项的文档在这里：https://leafletjs.com/reference-1.7.1.html#marker-zindexoffset

使传单标记不可交互但可搜索

Make leaflet markers non-interactable but searchable

javascript

markers

non-interactive

leaflet