Javascript 使用传单搜索标记。控制。从下拉列表中搜索_Javascript_Search_Leaflet

Javascript 使用传单搜索标记。控制。从下拉列表中搜索

javascript search leaflet

Javascript 使用传单搜索标记。控制。从下拉列表中搜索,javascript,search,leaflet,Javascript,Search,Leaflet,我使用GeoJSON特性搜索标记，它工作正常。现在我必须键入第一个字母才能找到标记，但我想从包含所有标记的下拉列表中选择它们。这是一种方法吗？如果您想要一个包含所有标记的下拉列表，最好创建一个自定义控件，而不是尝试修改传单.control.Search。使用包含所有标记的select元素创建控件有点复杂，但肯定比调整其他人已完成项目的代码简单得多首先创建一个空控件： var selector = L.control({ position: 'topright' }); 要将内容放入控件中

我使用GeoJSON特性搜索标记，它工作正常。现在我必须键入第一个字母才能找到标记，但我想从包含所有标记的下拉列表中选择它们。这是一种方法吗？

如果您想要一个包含所有标记的下拉列表，最好创建一个自定义控件，而不是尝试修改传单.control.Search。使用包含所有标记的

select

元素创建控件有点复杂，但肯定比调整其他人已完成项目的代码简单得多

首先创建一个空控件：

var selector = L.control({
  position: 'topright'
});

要将内容放入控件中，可以使用控件的

.onAdd

方法。使用

L.DomUtil.Create

，为控件创建一个容器div，在此上下文中，它将自动分配类

传单控件

，允许div中的任何内容显示在地图上，并像控件应具有的行为一样。然后在div中创建一个

select

元素。如果需要，可以给它一个默认选项。最重要的是，给它一个

id

，以便您以后可以参考它：

selector.onAdd = function(map) {
  var div = L.DomUtil.create('div', 'mySelector');
  div.innerHTML = '<select id="marker_select"><option value="init">(select item)</option></select>';
  return div;
};

要将所有标记作为选项添加到选择器中，可以使用，它将遍历组中的所有标记，并为每个标记调用一个函数。对于每个层，创建一个

选项

元素，并使用上面指定的

id

将其附加到

选择

元素。假设您已经创建了一个名为

markerLayer

的GeoJSON层，该层具有一个名为

STATION

的属性，您希望将其用作选项文本，它将如下所示：

markerLayer.eachLayer(function(layer) {
  var optionElement = document.createElement("option");
  optionElement.innerHTML = layer.feature.properties.STATION;
  optionElement.value = layer._leaflet_id;
  L.DomUtil.get("marker_select").appendChild(optionElement);
});

在这里，我们依赖于这样一个事实，即每一层在创建时都会被分配一个唯一的内部id号，

\u传单\u id

。我们将每个选项的

值

属性设置为相应层的

\u传单\u id

，以便在选择该选项时，我们可以访问标记

最后，要使控件在选择其中一个选项时实际执行某些操作，请使用选择器元素的

id

添加一些事件侦听器：

var marker_select = L.DomUtil.get("marker_select");
L.DomEvent.addListener(marker_select, 'click', function(e) {
  L.DomEvent.stopPropagation(e);
});
L.DomEvent.addListener(marker_select, 'change', changeHandler);

使用

stopPropagation

方法的

click

侦听器可防止选择器上的单击在与地图窗格重叠时传播到地图，这可能会立即取消选择您试图高亮显示的图层。

change

侦听器将运行一个处理程序函数，您可以将其设置为执行任何您想要的操作。在这里，我将其设置为在选择相应选项时打开标记的弹出窗口：

function changeHandler(e) {
  if (e.target.value == "init") {
    map.closePopup();
  } else {
    markerLayer.getLayer(e.target.value).openPopup();
  }
}

就这样！下面是一个将所有这些结合在一起的例子：

编辑：

如果您使用的是MarkerCluster插件，则可以使用以下命令修改更改处理程序函数以使用群集标记：

例如：

（我还更新了原始代码和示例，使用

.getLayer

方法，而不是

\u layers[e.target.value]

，因为这是一种基于标记id访问标记的更干净的方法）

如果您想要一个包含所有标记的下拉列表，您最好创建一个自定义控件，而不是尝试修改传单.control.Search。使用包含所有标记的

select