将过滤条件应用于地图的最简洁方法

时间:2012-05-08 15:23:01

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

我有一个页面,其中包含Google Maps V3地图和带有“过滤器”按钮的HTML表单。

我还有一个大的XML文件,它具有复杂的结构,包含每个标记的信息,我将在每个标记的信息框内解析为html。

我能够从XML文件中读取并生成标记并将它们绘制在地图上,但我不能在地图上过滤标记。

按下“过滤器”按钮后,在地图上过滤标记的最简洁方法是什么?符合我在页面上使用HTML表单指定的过滤条件?

到目前为止,我的表单有一个列表框:

Company - 根据您选择的公司名称,它应该在地图上显示其所有分支。 XML文件包含所有信息(分支地址,lat,lng,phonenumber,它属于comapny)。

XML结构:

<markers>
    <marker>
        <company name="ComapnyName">
            <branches>
                <branch>
                    <address>BranchAddress</address>
                    <phone>BranchAddress</phone>
                    <products>
                        <product>
                            <name>ProductName</name>
                            <url>ProductURL</url>
                        </product>
                        <product />
                        <product />
                        ...
                    </products>
                </branch>
                <branch />
                <branch />
                ...
            </branches>
        </company>
    </marker>
    <marker />
    <marker />
    ...
</markers>

1 个答案:

答案 0 :(得分:3)

实现您所描述的过滤的简单方法是将标记放入Array,在过滤器设置更改时遍历Array,然后将标记关闭

Marker.setMap( null );

Marker.setMap( map );

如果您将过滤器视为切换,您可能需要创建一些状态变量以跟踪过滤器设置,以便您也可以编写类似于此的代码:

var filterOptionAbcIsOn = false;
function toggleFilters() {
    if ( filterOptionAbcIsOn ) {
        // loop across the Array and turn the markers off
        filterOptionAbcIsOn = false;
    }
    else {
        // loop across the Array and turn the associated markers on
        filterOptionAbcIsOn = true;
    }
}