javascript - 使用 Leaflet.Control.Search 从下拉列表中搜索标记

Question

我使用Leaflet.Control.Search用于通过 GeoJSON 功能搜索标记，它工作正常。现在我必须输入第一个字母才能找到标记，但我想从包含所有标记的下拉列表中选择它们。有办法吗？

Answer 1

如果您想要一个包含所有标记的下拉列表，您最好创建一个自定义控件，而不是尝试修改 Leaflet.Control.Search。使用包含所有标记的 select 元素创建一个控件有点复杂，但肯定比调整其他人已完成的项目的代码简单得多。

首先创建一个空控件:

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

要将内容放入控件中，您可以使用控件的 .onAdd 方法。使用L.DomUtil.create为控件创建一个容器div，在这种情况下，它会自动分配类leaflet-control，允许div中的任何内容显示在 map 并表现得像控件应该表现的那样。然后在 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;
};

既然控件知道添加到 map 时要做什么，请继续添加它:

selector.addTo(map);

要将所有标记添加为选择器中的选项，您可以使用 .eachLayer method ，它迭代组中的所有标记并为每个标记调用一个函数。对于每个层，创建一个 option 元素，并使用上面分配的 id 将其附加到 select 元素。假设您创建了一个名为 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 号，_leaflet_id。我们将每个选项的 value 属性设置为相应图层的 _leaflet_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 监听器是为了防止选择器上的点击与 map Pane 重叠时传播到 map ，这可能会立即取消选择您想要突出显示的图层。 change 监听器将运行一个处理函数，您可以将其设置为执行您想要的任何操作。在这里，我将其设置为在选择相应选项时打开标记的弹出窗口:

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

就是这样!这是一个将所有这些一起工作的示例:

http://jsfiddle.net/nathansnider/ev3kojon/

编辑:

如果您使用 MarkerCluster 插件，则可以使用 .zoomToShowLayer method 修改更改处理程序函数以使用集群标记。 :

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

示例:

http://jsfiddle.net/nathansnider/oqk6u0sL/

(我还更新了原始代码和示例以使用 .getLayer 方法而不是 ._layers[e.target.value]，因为这是一种更简洁的方法根据其 id 访问标记)