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

【问题标题】：Make leaflet markers non-interactable but searchable使传单标记不可交互但可搜索
【发布时间】：2021-05-01 17:37:48
【问题描述】：

所以我使用 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

代码迷们有什么想法吗？

【问题讨论】：

标签： javascript leaflet markers non-interactive

【解决方案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

【讨论】：