Question

我有一个地图，上面填充了由ul的li表示的标记（引脚）（每个li有2个div，用于定义lat和long数据）。这些li从带有隐藏/显示的下拉菜单（选择标记）中分类。当选择值更改时，我只希望可见的li标记填充地图。

我需要有关代码的帮助，以便在选择值更改时删除隐藏的标记。目前，当隐藏li时，所有标记都保留在地图上。你能看出我做错了吗？

JS：

$(document).ready(function(){
var licounter = 0;

    $("#mapContent ul li").each(function(index) {
      licounter ++;
      if ($("#mapContent ul li:hidden")){
        markers.splice(licounter, 1);
        licounter --;
      };
    });
});
});

如果有帮助，这是完整的代码：

var mapStart = new google.maps.LatLng(41.8819,-87.823);
var markers;
var map;
var infowindow = new google.maps.InfoWindow();

function initialize() {
markers = new Array();
var mapOptions = {
  zoom: 6,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  center: mapStart
};

map = new google.maps.Map(document.getElementById("map"),
        mapOptions);



$("#mapContent ul li").each(function(index) {

    var marker = new google.maps.Marker({
    position: new google.maps.LatLng($(this).children(".marker_long").text(), $(this).children(".marker_lat").text()),
    map: map,
    animation: google.maps.Animation.DROP,
    icon: 'images/marker.png',
    title : $(this).children(".marker_title").text()
    });

    markers.push(marker);
});
}

$(document).ready(function(){
var licounter = 0;

$('select[name="mapCat"]').change(function(){

    var chosenCat =$(this).val();       
    $('#mapContent ul li').hide();
    $('#mapContent ul li.'+chosenCat).show();
    if (chosenCat == 'opt0'){
        $('#mapContent ul li').show();
    };


    $("#mapContent ul li").each(function(index) {
      licounter ++;
      if ($("#mapContent ul li:hidden")){
        markers.splice(licounter, 1);
        licounter --;
      };
    });
});
});

google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

不知何故，你需要决定你的过滤器上的钩子是什么。例如，评估为是/否或特定值的东西......

然后您可以将该值分配给标记。例如，在创建标记时：

// Inside the for loop to create your markers.
marker.set('id', results[i].id);

这会给你一些你可以比较的钩子。

您需要将所有标记放入数组中。

var markerArray = [];
...
// Other marker setup.
markerArray.push(marker);

对于你的过滤器（选择输入），你需要这样的东西：

$(selector).on('change', function() {
    var filter = $(this).val();
    for (var i = 0; i < that.plotMarkers.length; i++)
    {
        if (markers[i].YOUR_HOOK === filter || filter === '')
        {
            markers[i].setVisible(true);
        }
        else
        {
            markers[i].setVisible(false);
        }
    }
});

简而言之，您需要为标记使用“setVisible”。如果您正在使用群集，那么您需要查看“markerCluster.setIgnoreHidden” - 使用MarkerClusterrPlus

从li元素填充数组值，从数组中删除隐藏的li

1 个答案: