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

问题描述

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

这是我为不可见标记编写的代码（您可以忽略变量 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

代码迷们有什么想法吗？

解决方法

您想在设置标记时使用标记选项之一来设置 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