Javascript 筛选器映射标记不一致

我试图通过选择框在地图上过滤标记

在每个标记数组上都有一个类别对象，该对象具有一个类别数组，可以与用户选择的内容相匹配

选择框

<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);
          }
        }
    }
}

filterMarkers=功能（类别）{
对于（变量i=0；i

但在过滤后，它不会显示某些标记，例如绿色类别，也不会显示红色类别的所有标记

但是，当I console.log循环中的marker变量时，它返回正确的匹配项，但是setVisible似乎没有在所有标记上设置它

JS小提琴：

---

我建议您使用MVCObject而不是循环。 是其他类（例如贴图、标记、多边形、多段线…）的超类。 使用MVCObject的方法，您可以非常简单地编写过滤代码

MVCObject将在值更改时触发“（键名）\u更改”事件。

例如：

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.

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'

您可以使用addEventListener（）或重写changed（）方法侦听事件

正如我在第一部分所描述的，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 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.

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'

事实上，使用这种机制，您只需将category值放入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;
}

这是我以前写的一个演示代码。 地图的右边有一个边栏。 您可以将类别从“野村新干线”、“Hikari新干线”和“Kodama新干线”更改