過濾器地圖標記不一致

我試圖讓標記通過選擇框在地圖上過濾。過濾器地圖標記不一致

在每個標記數組上都有一個類別對象，該類別對象具有可以與用戶選擇的內容匹配的類別數組。

選擇框

<select id="type" onchange="filterMarkers(this.value);"> 
    <option value="">Please select category</option> 
    <option value="red">Red</option> 
    <option value="blue">Blue</option> 
    <option value="green">Green</option> 
    <option value="orange">Orange</option> 
</select>

過濾功能

filterMarkers = function (category) { 
    for (var i = 0; i < markers1.length; i++) { 
     marker = gmarkers1[i]; 
     for(var j = 0; j < marker.category.length; j++) { 
     console.log(marker.category[j]); 
      // If is same category or category not picked 
      if (marker.category[j] == category || category.length === 0) { 
       marker.setVisible(true); 
      } 
      // Categories don't match 
      else { 
       marker.setVisible(false); 
      } 
     } 
    } 
}

但它過濾後，它沒有顯示某些標記，如綠色類別，而不是所有的爲紅色類別顯示。

但是，當我console.log標記變量在循環中，它返回適當的匹配，但似乎setVisible不會在所有的標記上設置它。

JS小提琴： https://jsfiddle.net/0v7yv6w8/

來源

2016-03-03 Myoji

我建議你使用，而不是循環MVCObject。 MVCObject是其他類的超類（如Map，Marker，Polygon，Polyline ...）。使用MVCObject的方法，您可以非常簡單地編寫過濾代碼。

當值改變時，MVCObject會觸發「（key_name）_changed」事件。

例如：

var myObj = new google.maps.MVCObject(); 
myObj.set("choice", "category1"); // "choice_changed" event will be occurred. 
myObj.set("choice", "category2"); // "choice_changed" event will be occurred.

而且你可以聽使用addEventListener（）事件或覆蓋變化（）方法。

myObj.addListener("choice_changed", function() { 
    var choice = myObj.get("choice"); 
    ... 
}); 

or 

myObj.changed = function(key) { 
    var choice = myObj.get(key); 
    ... 
};

正如我在第一次描述的那樣，Marker類繼承了這個MVCObject類，你可以做同樣的事情。此外，Map類也是。

function createMarker(params) { 
    var marker = new google.maps.Marker(params); 
    marker.changed = function(key) { 
    if (key === 'choice') { 
     var choice = marker.get('choice'); 
     marker.setVisible(choice === params.category); // true or false 
    } 
    }; 
    return marker; 
} 
var marker1 = createMarker({ 
    position: ..., 
    category: "red" 
}); 
var marker2 = createMarker({ 
    position: ..., 
    category: "green" 
});

MVCObject有一個非常有用的方法：bindTo()。該方法綁定指定屬性的值。

例如：

var map = new google.maps.Map(...); 
map.bindTo('choice', marker1); // marker1.choice = map.choice 
map.bindTo('choice', marker2); // marker2.choice = map.choice 

map.set('choice', 'green'); 
console.log(marker1.get('choice')); // 'green' 
console.log(marker2.get('choice')); // 'green'

事實上，使用這種機制，你只要把類別值的map.choice。您不需要循環所有標記。

要更簡潔的代碼，您可以在createMarker（）函數中編寫bindTo()方法。

function createMarker(params) { 
    var marker = new google.maps.Marker(params); 

    params.map.bindTo('choice', marker); 

    marker.changed = function(key) { 
    if (key === 'choice') { 
     var choice = marker.get('choice'); 
     marker.setVisible(choice === params.category); // true or false 
    } 
    }; 
    return marker; 
}

這是我以前寫的演示代碼。地圖右側有一個側欄。你可以改變從「希望號新幹線」的範疇，「光新幹線」和「兒玉新幹線」

http://googlemaps.googlermania.com/google_maps_api_v3/en/map_example_sidebar2.html

來源

2016-03-03 17:58:10 wf9a5m75

過濾器地圖標記不一致

回答

相關問題