javascript - map 根据可见内容显示不同的点

Question

我已经得到了我想要的 90%:

https://jsfiddle.net/ruwez7tq/

我想要做的就是根据可见的列表更改显示的绘制点。目前只能看到第一个列表(“条”)的点。即使这是默认的页面加载点，例如，当您单击“餐厅”时，编号点也应更新到这些位置。

这是我绘制点并更改单击的任何点的颜色的 JS(当单击点或列表项时):

for (i = 0; i < bars.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(bars[i][1], bars[i][2]),
        map: map,
        label: String(bars[i][3]),
    });
    gmarkers.push(marker);
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(bars[i][0]);
            infowindow.open(map, marker);
            for (j = 0; j < gmarkers.length; j++) {
                gmarkers[j].setIcon("");
            }
            marker.setIcon("imgs/green.png");
        }
    })(marker, i));
}

$('#bars-list li').each(function(i, e) {
    $(e).click(function(i) {
        return function(e) {
            google.maps.event.trigger(gmarkers[i], 'click');
        }
    }(i));
});

我已经得到了我想要的 90%:

https://jsfiddle.net/ruwez7tq/

我想要做的就是根据可见的列表更改显示的绘制点。目前只能看到第一个列表(“条”)的点。即使这是默认的页面加载点，例如，当您单击“餐厅”时，编号点也应更新到这些位置。

这是我绘制点并更改单击的任何点的颜色的 JS(当单击点或列表项时):

我正在尝试弄清楚如何将其推广到每个列表，以及如何利用它根据可见的列表来更新 map ？!

预先感谢您的帮助!

Answer 1

类似这样的东西(确保将函数和全局变量放置在窗口范围内)

对于 JavaScript

function hide_show( category ){
  for (i = 0; i < amenities.length; i++) {
     gmarkers[i].setMap(null);
      if amenities[3] = category {
        gmarkers[i].setMap(map);
      }
  }
}

对于 HTML

<div id="bars-list" class="lists" onclick"hide_show('bars');">