Google在右侧面板中存储定位器库限制标记

Question

我想限制在地图上出现在右手面板上的标记数在任何缩放级别上都是10左右。

如何才能做到这一点？

可以在这里找到库和示例：

http://storelocator.googlecode.com/git/index.html

我遵循这里给出的代码示例：

http://storelocator.googlecode.com/git/examples/panel.html

这里有一个代码引用：

http://storelocator.googlecode.com/git/reference.html

但我仍然不清楚如何定制我所遵循的示例，这样它在任何时候最多只能显示10个标记。

编辑:为什么我要做这个

我把一种产品批发给许多美容院。有了这张地图，我想告诉顾客，他们可以去哪家沙龙购买我供应的产品。

然而，在google给出的例子中，沙龙的完整列表显示为地图上的标记。这是不好的，因为这是可能的竞争对手收集完整的沙龙名单，他们可以市场竞争的产品。

我想要的解决方案是，每次最多只显示10个标记，不管哪个是最接近输入地址的。

Answer 1

对我来说，示例( http://storelocator.googlecode.com/git/examples/panel.html )总是只显示面板中最多10个条目。硬编码限制为10，所以不修改store-locator.min.js是不可能实现的

但是，当您不想显示少于10个条目时，就可以通过CSS：

/* limit the displayed entries to 5 */
.store-list li:nth-child(n+6){display:none}

当您想要应用更高的限制(或者它应该与IE<9兼容)时，请在store-locator.min.js中编辑这个部分(第28行)

m=e.min(10,c[E]);

(将10设置为所需的值)

若要限制结果的数量，请在MedicareDataSource.prototype.parse_中编辑这一行

for (var i = 1, row; row = rows[i]; i++) 

并将其设置为

for (var i = 1, row; row = rows[i],i<XXX; i++)

(如果XXX是限制+1，例如将XXX设置为11，则限制为10)

Answer 2

有几种通用的方法，更好的解决方案在一定程度上取决于你拥有的商店总数，以及你想让别人刮目相看的难度。

您可以像本例一样继续使用静态数据提要(这意味着在加载时将所有存储发送到浏览器)，然后添加一些逻辑只显示最近的10 (例如，对于面板中也没有显示的所有标记，将映射设置为null )，但如果：

• 有很多商店(超过一千家)，因为当只显示几个时，加载它们的速度会不必要的慢。
• 您不希望有人查看您的代码，只需抓取您正在发送的全部数据的完整CSV即可。

考虑到您的抓取问题，更好的方法可能是使用动态数据源实现存储定位器，该数据源只返回给定lat/lng的最接近的N条记录，这样就不会立即公开整个事件。使用Google服务，您可以使用带有API的Maps引擎，存储定位器包括一个可以开始使用的Google引擎示例。您在这里关注的安全问题是，如果这些查询是公开的，任何人都可以直接访问，表也是公共的，然后有人可以查询完整的表。因此，您可能希望在其中添加一个代理，以避免这种查询攻击(当然，如果有人真的愿意的话，可以向您提供大量的位置，以便最终得到所有的商店)。

其他选项(同样只是查看谷歌的栈-尽管这类事情有很多替代方案，比如CartoDB等)--包括AppEngine的Search，它还返回N个最近的项(但需要一些服务器端编码，而Maps引擎则不需要)，或者甚至将数据放入谷歌电子表格并实现一个基本的脚本-> Web服务，其中脚本接受lat/lng并做一些基本的数学运算来找到最接近的项。

同样，如果您不喜欢服务器端方面，那么Maps引擎可能是您快速启动的最佳选择，特别是考虑到存储定位器代码中有一个工作示例。