如何使用列表框过滤谷歌地图标记?

时间:2012-05-09 14:17:57

标签: javascript jquery xml google-maps google-maps-api-3

我希望能够使用3个列表框过滤地图上的标记,每个列表框可能有多个选择。

我没有在网上找到任何关于过滤谷歌地图的内容,因为this example附近有我们想要的复选框。

除了show()hide()函数之外,我已经从那里借用了所有代码,并为自己做了一对:

//  grabs values of all selected items inside a listbox
//  pushes them into an array and returns it.
//  'listbox' string parameter is mandatory
function grabSelectedItems(listbox) {
    if(document.getElementById(listbox)){
        var selectedOptions = [];
        var listBoxInstitutions = document.getElementById(listbox);
        for(var i = 0; i < listBoxInstitutions.options.length; i++) {
            if(listBoxInstitutions.options[i].selected) {
                selectedOptions.push(listBoxInstitutions.options[i].value);
            }
        }
        return selectedOptions;
    }
    alert(listbox + " couldn't be found");
}

//  uses 'grabSelectedItems()' to get selected values
//  from multiple listboxes, puts the returned arrays into
//  one, big array and returns it.
//  accepts minimum 1 string parameter(mandatory) or more
//  treating each parameter as the name of a listboxe
//  to grab selected values from
function grabAllSelectedItems() {
    if(arguments.length > 0) {
        var allSelectedOptions = [];
        for(var i = 0; i < arguments.length; i++) {
            allSelectedOptions.push(grabSelectedItems(arguments[i]));
        }
        return allSelectedOptions;
    }
    alert("Please pass at least one string parameter");
}

现在,当点击id为filter的输入按钮时,我用它来返回大量选定值:

$(function() {
    $("#filter").click(function() {
        grabAllSelectedItems('listbox1', 'listbox2', 'listbox3');
    });
});

但我现在陷入困境,无法弄清楚如何根据我在列表框中的选择来绘制标记。

我有一个包含所有数据的大型XML文件,我想用它根据我在列表框中选择的内容在地图上生成和绘制标记。所有标记都有lat和lng coords,但这些标记也包含这些子标记,这些标记也有自己的lat和lng coords。我这样做是因为他们的信息是相互关联的。

之前有人做过这样的事吗?

0 个答案:

没有答案