javascript - 过滤 Google map 标记

Question

我已将不同的信息传递到我的自定义 Google map 中，如下所示；

marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    icon:image,
    title: locations[i][0],
    price: locations[i][3],
    occupancy: locations[i][4],
});

我试图在单击按钮时过滤标记；

$(document).on('click', '#price-filter', function(){
    $.each(map.markers, function(i, marker) {
        if(marker.price <= '80.00')
            marker.visible = false;
        else
            marker.visible = true;
    });
});

这没有运行，我已经尝试了 function initMap() {} 内部和外部的单击，但它不起作用。有什么想法吗？

编辑请找到位于 https://jsfiddle.net/g19avj3e/ 的 JSFiddle

Answer 1

如果将单击函数移至 initMap 函数内(以便渲染 DOM 并且可以找到 #price-filter 复选框)，它将运行。但没有 map.markers 数组。您可以创建该数组并将标记插入其中:

// before loop
map.markers = [];

// inside loop
map.markers.push(marker);

下一个问题是没有记录的标记的 .visible 属性，您需要使用记录的 .setVisible() 方法。

$(document).on('click', '#price-filter', function(){
    $.each(map.markers, function(i, marker) {
        if(marker.price <= '80.00')
            marker.setVisible(false);
        else
            marker.setVisible(true);
    });
});

proof of concept fiddle