使用 gomap jQuery 插件显示和隐藏 Google Maps 中的标记组

• 下载源码 - 102.6 KB

主题

正如我 之前写过的，Google 地图非常棒，而 gomap 插件 使它们的使用更加愉快。

引子

显示大量同质化标记很棒，有时也足够了，但如果你想显示和隐藏标记的组或类别呢？为了使组/类别在视觉上有所区别，你可以使用不同颜色的标记，每种颜色代表一个组。然后，你还可以使用 gomap 函数轻松地“一举”隐藏或显示特定组的所有标记。

gomap 插件的 CreateMarker() 函数有一个 icon 属性，你可以设置它，以便使用你想要的任何图像作为该标记。

首先，你（当然，在将想要的图像保存到你的项目中后）可以声明各种组的“伪常量”及其对应的标记图像路径，例如：

var constants = {
    'nflIcon': 'Content/Images/lightorange.png',
    'mlbIcon': 'Content/Images/green.png',
    'stateCapsIcon': 'Content/Images/indianred.png',
    'natlParksIcon': 'Content/Images/skyblue.png',
    'authorsIcon': 'Content/Images/purple.png',
    'musiciansIcon': 'Content/Images/teal.png'
};

然后，一个示例 CreateMarker() 调用看起来像这样：

$.goMap.createMarker({
    address: '37.83°N 119.50°W',
    title: 'Yosemite',
    group: 'NatlParksGroup',
    icon: constants.natlParksIcon,
    html: getYosemite()
});

当然，你需要为每个要创建的标记都这样做。正如你可能已经注意到的，CreateMarker() 函数还有一个可以设置的“group”属性，gomap 提供了一个 ShowHideMarkerByGroup() 方法，允许你像这样以编程方式显示或隐藏一个组：

$.goMap.showHideMarkerByGroup('NatlParksGroup', true)

如你所料，上面的代码使“国家公园组”（即在 CreateMarker() 调用中，其 group 属性设置为 'NatlParksGroup' 的那些标记）的所有标记可见。如果传递给 showHideMarkerByGroup() 的第二个参数是“false”，则相应的标记将被立即隐藏。一旦标记加载到地图上，隐藏它们几乎是瞬间完成的，重新显示它们也是如此。

通过这种方式使用组，你可以同时显示许多不同类型的数据。例如，我的“USA Map-O-Rama”网页（所有代码都附在本文章中，可以下载）在激活/显示所有六个组后，看起来是这样的：

你可能已经注意到，gomap 的 CreateMarker() 函数还有一个 HTML 属性。你可以用它来添加任何你想在标记被点击时显示的 HTML。例如，如果用户点击密苏里州汉尼拔市的“马克·吐温”标记，他将看到这个：

对于所有标记也是如此：对于体育队（本地图仅包含美国国家橄榄球联盟或美国职业棒球大联盟，但你可以扩展它以包含你喜欢的运动（我也喜欢篮球，但由于该运动中存在不公平的裁判判罚，我个人已抵制 NBA）），会显示这些球队的书籍；对于州首府，会显示关于该州的图书；对于音乐家，会显示他们一些最受欢迎或重要的唱片，等等——点击其中任何一个都会带你到亚马逊上的这些书籍/唱片页面）。

建议

当然，你可以使用这个文件作为起点，或者至少是一个“灵感”，来创建你自己的包含相似或非常不同的类别的其他地区的地图。例如，一张类似的加拿大地图，用曲棍球队代替棒球队，或者一张英国地图，显示足球队和摇滚乐队的基地）也可能非常有趣。

另一个增强功能是，用经纬度（如上面约塞米蒂公园所示）替换“人类可读”的地址，例如“加利福尼亚州布拉格堡”。毫无疑问，当地图上的标记被放置得更快时，将已完成地址转换为地理位置（地理编码）的中间步骤，对 Google 而言会更加便捷。

在包含的 jQuery 中，在某些情况下我执行了此操作，即在必要时（例如，对于国家公园，它们实际上没有“地址”，因此使用经纬度是必要的）。此外，对于一些体育队，仅仅城市就足够了（例如“威斯康星州绿湾”），但对于其他城市，同一个城市有多个体育队，甚至在同一类别中（例如芝加哥小熊队和芝加哥白袜队），我使用了该球队体育场的地址。

总而言之，用经纬度对替换地址，无论是相对通用的（如“威斯康星州绿湾”）还是相当具体的（如“伊利诺伊州芝加哥市西阿迪森街 1060 号，邮编 60613”），都可以加快标记的加载速度。

注意：要运行本文讨论的独立（非托管）站点，只需下载文章的 zip 文件，展开/解压/解压缩它，然后双击 MapORamaHome.html 文件。

此外，或者作为替代，你可以 在此处 查看实时网站。实时网站将始终是最新的，因为我偶尔会添加作者和音乐家（例如，最近添加了 Caroline Miller 和 Erskine Caldwell 等人）。

秘密奖励部分（不要读，否则你的眼睛会爆炸）

注意：如果你在浏览器中运行此网页并“缩小”，你将看到更多标记，特别是最新的州首府（夏威夷和阿拉斯加）以及国家公园，包括干龟岛（湿龟岛大概在水下，因此不可见），甚至还有美属萨摩亚。