【问题标题】:Cleanest way to apply filter criteria to the map将过滤条件应用于地图的最简洁方法
【发布时间】:2012-05-08 15:23:01
【问题描述】:

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

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

我能够从 XML 文件中读取和生成标记并将它们绘制在地图上,但我无法集中精力过滤地图上的标记。

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

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

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

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>

【问题讨论】:

  • 为什么不设置一些数组并在每个数组中包含对标记的索引引用?如果您过滤公司名称,那么您应该能够在数组中引用公司名称及其各自的标记。但是,为什么不将 XML 文件中的数据移动到数据库并使用 AJAX 即时请求标记呢?这似乎是一种更具可扩展性、更高效和更简洁的方法。
  • @andresf 实际上,我使用的是 MySQL 数据库。我有一堆在它们之间有关系的表(外键、关联/联合表),它们也保存了我在 XML 中拥有的所有数据。我使用 PHP 通过调用数据库来生成我的 XML 文件。您是说使用 AJAX 查询数据库的搜索结果会更好吗?你会不会像那样对数据库服务器施加压力,而不是使用一个巨大的 XML 文件,这个文件每隔一小时左右就会更新一次 cron 作业。

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


【解决方案1】:

实现您描述的过滤的直接方法是将您的标记放入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;
    }
}

【讨论】:

  • 我是否必须使用 documnet.getElementById('IDOfTheControlOnTheForm') 之类的东西来获取在表单上的列表框或其他类型的控件中选择的值以传递它/与 JavaScript 一起使用它?
  • 是的,您必须检索 html element 状态(选中、选中等)才能知道设置了哪些过滤器设置。但同样重要的是,您还需要知道element 的状态何时发生变化的方法。我所做的是:在我的页面上为每个过滤器设置添加一个checkbox,使用jQuery 将每个checkbox 显示为image/button,然后为每个定义一个click 事件侦听器,以便我可以更新地图在用户打开或关闭过滤器设置时显示。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-11-14
  • 2021-09-29
  • 2022-01-03
  • 2016-12-17
  • 2014-07-29
相关资源
最近更新 更多