使用OnClick刪除標記<option>

我有一個包含兩個類別的下拉菜單。當選擇類別＃1時，標記會很好地放下，但是當選擇類別＃2時，如果我在函數中有markers.setMap(null)，標記不會丟失。類別＃1中的標記應在選擇類別＃2時刪除。我將標記推向全局陣列，所以我不確定我做錯了什麼。使用OnClick刪除標記<option>

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是一個數組？

來源

2014-12-07 mapr

markers是一個數組（其不具有方法setMap）

必須遍歷這個陣列，並要求每個項目（標記物）的方法setMap。

來源

2014-12-07 22:00:32

我應該使用'for'循環嗎？ – mapr 2014-12-07 22:06:17

是的，這是迭代數組的方式 – 2014-12-07 22:08:05

也許這對你很有趣：http://stackoverflow.com/a/25773616/459897 – 2014-12-07 22:14:07

-1

看着你的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簡稱）。本身將不得不被重構來接受新的論證並對其進行處理。

該解決方案的另一個優點（除了僅僅工作:)）是你可以擺脫所有代碼中的重複。你不會需要的dropMarkers2功能。您只需檢查select元素的value在您的函數中。（請注意，我們改變了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元素具有名爲value的屬性，該屬性等於value屬性任何option元素被選中。通過將select元素傳遞給函數，您可以參考該函數內部元素的value。

如果您明白，您將能夠解決您的問題。

來源

2014-12-07 22:23:43 Luke

使用OnClick刪除標記<option>

回答

相關問題