Question

我有一个包含两个类别的下拉菜单。当选择类别＃1时，标记会很好地下降，但是当选择类别＃2时，如果我在函数中有markers.setMap(null)，则标记不会丢失。选择类别＃2时，应删除类别＃1中的标记。我正在将标记推送到全局数组，所以我不确定我做错了什么。

function dropMarkers2() {
    markers.setMap(null); // This line seems to be the issue
    var i = 0;
    var interval = setInterval(function () {
        var data = markersList2[i];
        var latLng = new google.maps.LatLng(data.latLng[0], data.latLng[1]);
        var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            animation: google.maps.Animation.DROP
        });
        markers2.push(marker);

        i++;
        if (i == markersList2.length) {
            clearInterval(interval);
        }
    }, 150);
}

我的JSFiddle可以在这里找到：http://jsfiddle.net/g7uhond8/

编辑：我已经完成了两个版本，但仍然没有解决问题。

在这个JSFiddle中，标记不会停止下降。我的for循环有问题。 http://jsfiddle.net/k9eomk5f

在这个JSFiddle中，我能够删除标记，但标记会在同一位置删除。如果我使用markerList，它们不会迭代，但在我使用neighborhoods时会执行迭代：http://jsfiddle.net/zeyn30tm

为什么？ markerList是一个列表，neighborhoods是一个数组？

Answer 1

markers是一个数组（没有方法setMap）

您必须迭代此数组并为每个项目（标记）调用方法setMap。

Answer 2

查看您的JSFiddle，问题在于调用dropMarkers和dropMarkers2的方式。在您的HTML中，您有：

<select>
  <option onclick="dropMarkers();">Category #1</option>
  <option onclick="dropMarkers2();">Category #2</option>
</select>

Option个元素没有onclick方法。您需要做的是将函数附加到select元素的onchange方法：

<select onchange="dropMarkers(this)">
  <option value="1">Category #1</option>
  <option value="2">Category #2</option>
</select>

这样，只要选择了一个选项，就会调用dropMarkers，将select元素作为唯一参数传递（由this引用）。 dropMarkers本身必须重构才能接受新论点并进行处理。

此解决方案的额外优势（除了仅仅工作:)）是您可以摆脱所有代码中的重复。您不会需要 dropMarkers2功能。您只需检查函数中value元素的select是什么。（请注意，我们将option元素更改为上面有value个属性。）

function dropMarkers(target) {
  var option = target.value; // the `value` attribute of the `select` element passed in
  if (option == 1) {
    // drop the markers in set 1
  } else if (option == 2) {
    // drop the markers in set 2
  //  ...
}

它将重构您的代码，但它可以在另一端更清晰。有许多事情可以进入，但是现在，要点是通过附加到select元素来调用函数，并且select元素具有名为{的属性{1}}，等于所选value元素的value属性。通过将option元素传递给函数，您可以引用函数内部元素的select。

如果您了解这一点，您将能够解决问题。

在<option> </option>中使用OnClick删除标记

2 个答案: