Question

我有以下网站Brazil1和Brazil2

我上传了一些GPS站（Json点功能），我需要使用HTML选择对象选择一个特定的GPS站（基于站点名称“EstaçãoRBMC”）：

<select name="sometext" >
  <option value="MGRP">mgrp</option>
  <option value="MGV1">mgv1</option>
  <option value="VICO">vico</option>
  <option value="MGBH">mgbh</option>
  </select>

我的第一次尝试是URL，但我不太了解。

有人可以给出提示吗？

感谢您的时间。

Answer 1

在select元素中指定的重要事项是id，因为这是您将用于添加事件侦听器的内容。像这样：

<select id="sta_select">
  <option>(select station)</option>
  <option value="MGRP">mgrp</option>
  <option value="MGV1">mgv1</option>
  <option value="VICO">vico</option>
  <option value="MGBH">mgbh</option>
</select>

然后，您可以根据id：

添加事件侦听器

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

使用click方法的stopPropagation侦听器是为了防止点击选择器传播到地图（如果它们与地图窗格重叠），这可能（取决于您的设置）立即取消选择你试图突出的图层。 change侦听器将运行处理函数，您可以将其设置为执行任何操作。在此处，我已将其设置为在选择相应的option时打开标记的弹出窗口（基于选项元素中的value属性与SG_RBMC之间的匹配geoJson层中的属性）：

function changeHandler(e) {
    for (i in estacoes_rbmc._layers) {
        if (estacoes_rbmc._layers[i].feature.properties.SG_RBMC === e.target.value) {
            estacoes_rbmc._layers[i].openPopup();
        }
    }
}

这是一个在工作中表现出来的小提琴：

http://jsfiddle.net/nathansnider/80qcstLf/

还有一个更有趣的版本，它将选择元素放在Leaflet控件中的地图上，并自动填充选项属性：

http://jsfiddle.net/nathansnider/avn0ph1p/

通过HTML SELECT对象过滤Json功能

1 个答案: