使用谷歌地图API版本3的商店定位插件

Posted 2023-05-11

tags:

中文标题：使用谷歌地图API版本3的商店定位插件 原文标题：A store locator plugin using Google Maps API version 3 项目评级：Star:485 Fork:239 下载地址：https://github.com/bjorn2404/jQuery-Store-Locator-Plugin 详情介绍

jQuery谷歌地图商店定位器插件

您要查找的文件在dist/目录中

请查看我的博客以获取更多信息和示例。

这个jQuery插件利用谷歌地图API版本3创建一个易于实现的商店定位器。不

后端编程是必需的，您只需要向它提供带有所有位置信息的KML、XML或JSON数据。

如何创建数据文件取决于您自己。我最初是为一家没有太多地点的公司创建的，所以我

只是使用了一个静态XML文件。如果出现以下情况，您需要事先对位置进行地理编码或使用地理编码API服务

你想试着在飞行中做到这一点。原因是所有免费的地理编码API都有严格的限制

容易被超过。最后，存储坐标比查找每个坐标要好得多

每个请求的位置。

关于距离计算的注意事项：这个插件目前使用的是我在的博客上找到的距离函数

Chris Pietschmann。

谷歌地图API第3版包含距离计算服务

（谷歌距离矩阵API），但我决定不使用

这是因为当前的请求限制似乎有些低。对于v2，我还尝试使用Directions API来请求距离，但也发现限制太严格。因此，距离计算是“像乌鸦飞一样”，而不是

道路距离计算。但是，如果您使用内联方向选项，该选项确实提供了通过方向请求返回的距离。

最后，需要注意的是，插件需要Handlebars模板引擎。这将分隔

infowindows和位置列表元素，以便可以轻松地重新构造它们。把手相当光滑，可以阅读

Mustache模板和内置的助手真的派上了用场。根据您的数据源

总共将使用4个模板（KML与XML或JSON），如果不这样做，可以选择设置每个模板的路径

希望它们位于默认位置。如果你正在为移动设备开发一些东西，可以预先编译模板

以实现更快的加载。

WordPress版本

WordPress的Cardinal商店定位器插件现在可用，它使用这个jQuery插件

作为基础，所有设置都可以通过WP面板中的设置页面进行设置。它还与核心集成

WordPress功能，如位置数据的自定义帖子类型和位置分类的自定义分类法

过滤。

变更日志

3.1.10版

3.1.9版

3.1.8版

3.1.7版

3.1.6版

3.1.5版

3.1.4版

3.1.3版

版本3.1.2

3.1.1版

3.1.0版

3.0.1版

3.0.0版

版本3有一个突破性的变化，dataLocation和dataType设置将默认值从XML切换到JSON。

2.7.4版

2.7.3版

版本2.7.2

2.7.1版

版本2.7.0

版本2.6.2

版本2.6.1

版本2.6.0

2.5.3版

2.5.2版

2.5.1版

2.5.0版

2.4.2版

版本2.4.1

版本2.4.0

2.3.3版

2.3.2版

版本2.3.1

版本2.3.0

版本2.2.2

版本2.2.1

版本2.2.0

版本2.1.0

包括Giancarlo Gomez的贡献。

2.0.9版

2.0.8版

2.0.7版

2.0.6版

2.0.5版

2.0.4版

2.0.3版

2.0.2版

2.0.1版

2.0.0版

版本2是基于

jQuery锅炉板。整个文件结构发生了变化，一些插件

设置已经更改，所有CSS现在都加了前缀，以避免潜在的冲突。换句话说，

您将无法简单地替换主插件文件以升级到最新版本。我一直在工作

在过去的六个月里，这一更新时断时续，所以发生了很多变化。我还根据收到的最常见的请求添加了许多新功能。以下列表并没有涵盖所有新内容，而是要注意的所有重要事项：

版本1.4.9

除了一些风格更新外，Mathieu Boilelat和Jimmy Rittenborg还有更多贡献：

版本1.4.8

本次更新由Mathieu Boilelat和Jimmy Rittenborg的贡献组成：

版本1.4.7

添加了以位置为特征的功能，使它们始终显示在位置列表的顶部。要使用，请将featuredLocations选项设置为true，并将feature=“true”添加到XML或JSON位置数据中的特征位置。

版本1.4.6

修复了一个错误，即如果map div被更改，infowindows将无法打开。

版本1.4.5

一个小的更新，包括最新版本的jQuery和Handlebars、两个新的位置变量和一些清理。

版本1.4.4

此更新包括

des修复了表单重新提交的错误，这在最大距离示例中最为明显。它还包括一个由quayzar提交的新jsonpCallback设置。

版本1.4.3

一个小的更新，包括一些清理和额外的语言选项。

新增内容：

修复：

版本1.4.2

这是另一个小补丁，有一些重要的修复和一个添加。该插件也已提交到官方的jQuery插件注册中心，该注册中心最终恢复在线。

新增内容：

修复：

请注意，如果您尝试使用jQuery 1.9.0的缩小版，由于票证13315中描述的错误，插件将在Internet Explorer中出错。

版本1.4.1

这是一个小补丁，用于将数组声明切换到更快的方法，将第682行修复为使用loc列表设置而不是div ID的目标，并删除

第328行的重复位置集声明。

版本1.4

这是一个大型更新，有许多更新和改进。需要注意的是，该插件现在需要Handlebars模板引擎。我做了这个更改，以便可以轻松地自定义位置列表和信息窗口中显示的数据。我还想将大部分布局添加从主插件文件中分离出来。手柄非常光滑，可以阅读Mustache模板，内置的助手真的可以派上用场。根据您的数据源，将使用总共4个模板中的2个（KML与XML或JSON），如果您不希望每个模板位于默认位置，则可以选择设置每个模板的路径。如果你正在为移动设备开发一些东西，可以预先编译模板，以便更快地加载。此外，我还想注意的是，与其他选项相比，现在使用KML作为数据源可能更有意义，但我肯定会放弃对XML和JSON的支持。XML仍然是默认的数据类型，但我将来可能会将其切换为KML。

新功能：

公里选项

这是一件很容易的事。你可以在没有太多麻烦的情况下做出改变，但我想我会让世界其他地方更容易。

原点标记选项

如果要显示原点，则应将originMarker选项设置为true。默认颜色为蓝色，但您也可以使用originpinColor选项更改该颜色。事实上，我不确定谷歌有多少种颜色可用，但我知道红色、绿色和蓝色有效——我只想试试你想看的颜色是否有效。

KML支持

另一个显而易见的附加功能。如果你想将这个插件与更多的自定义数据一起使用，这将是我推荐的方法，因为模板被简化为只有名称和描述。因此，您可以在描述中放入任何内容，而不必担心逐行格式化。此方法还允许您使用谷歌“我的地图”创建地图，并导出KML以与此插件一起使用。

更好的JSONP支持和5次回调

感谢“Blackout”传递了这些添加。它应该会让使用JSONP变得更容易，回调应该会对任何想要加入的人都有帮助，并添加一些更高级的自定义。

ASP.net WebForms支持

如果你正在使用ASP.net WebForms，那么包含表单标签显然会引起一些问题。如果您处于这种情况，只需将新的noForm选项设置为true，并确保formContainerDiv设置与您的模板匹配。

最大距离选项

现在，您可以轻松地添加一个距离下拉列表，其中包含您想要的任何选项。我特别添加了一个新的HTML文件作为示例。

位置限制现在支持任何数字

这个插件以前被限制为一次最多只能显示26个位置（基于英文字母表）。你现在可以将限制设置为你想要的任何值，如果超过26个，它将切换到只在位置列表中显示带数字的点标记。

打开所有位置的完整地图

我收到了几个请求，询问如何实现这一点，所以我添加了它作为一个选项。有一个新的fullMapStart选项，如果设置为true，将立即显示包含所有位置的地图，缩放将自动适应所有标记和中心。

相互关注

“JO”对将其添加到插件中特别感兴趣，我终于有时间了。为了实现相互关注，我为每个标记添加一个ID，然后利用HTML5的新数据属性将相同的ID添加到位置列表中的每个列表元素。我还添加了一些jQuery，使位置列表在地图上单击标记时滚动到正确的位置。

笔记：

一些选项名称已经更改，所以在更新文件之前一定要注意这些更改，尤其是使用JSON数据的人。

我已经包含了一个基本的LESS样式表，它没有变量，可以用来代替主map.css样式表。如果您想使用它，请进行任何更改并编译它或将其包含在主LESS文件中。

我有点担心未来版本的标记。谷歌已弃用图像图表API，该API是一个

nnoying（他们似乎总是贬低最好的东西），但这些仍然应该持续很长一段时间。话虽如此，但我对谷歌标记的外观的看法是，它们相当丑陋。我正在添加一个新的自定义标记，该标记可以通过Rich Marker实用程序用CSS控制，但我无法将其用于标记动画。我也在考虑使用Nicolas Mollet的自定义标记图标，与谷歌的相比，这些图标看起来非常漂亮，但该项目显然正在维护中，直到另行通知。如果你对这个问题有什么建议，我很想听听。

版本1.3.3

忘记删除Geocoder函数中的一个UTF-8编码行。

版本1.3.2

只有少数特殊字符可以使用以前的修复程序。删除了特殊编码，现在一切似乎都在工作。

1.3.1版

将第169行的.serialize替换为.val，并在正下方添加了一行，该行以UTF-8对字符串进行编码。这将解决具有国际地址的特殊性质问题。

版本1.3

添加了指向左侧列位置列表和HTML5地理定位API选项的方向链接。还做了一点清理。

1.2版

添加了JSON兼容性、到位置的距离列表和默认位置选项。还将jQuery调用更新到了最新版本（1.7.2），并删除了流程表单输入函数中不必要的一行。

1.1.3版

Serlialize针对的是页面上的任何表单，而不是特定的表单ID。感谢斯科特的指出。