logo标签列表

所有Google Maps v3标记的常见事件处理程序

javascriptgoogle-mapsgoogle-maps-api-3google-maps-markersmarker
3
我有一个地图，上面显示了500个标记，当用户滚动地图时这些标记会被重新绘制。每个标记都很复杂 - 它们都带有点击、鼠标悬停和鼠标移出事件（用于进行动画效果的设置）。这会导致一些性能问题，因为删除和添加这些标记需要很长时间。我一直在思考是否可以为整个地图附加单个的点击、鼠标悬停和鼠标移出事件处理程序，并在那里捕获从标记冒泡上来的事件。这种做法可能吗？它会改善性能吗？
我找到了这个链接 - 如何在Google Maps V3中为所有标记制定单个事件处理程序？ - 这是更好的方法，但仍然需要将处理程序分别附加到每个标记上。
我还发现了Google Maps数据层 - https://developers.google.com/maps/documentation/javascript/datalayer#add_event_handlers - 看起来只有一个事件附加到整个图层上，但我不确定它是否在内部将其附加到每个标记上。我也不确定额外的抽象层是否会拖慢速度。
还有其他解决方案吗？
我不会太过关注它的内部操作，你可以试一下看看性能是否得到改善。据我所知，它的目的是避免迭代每个叠加层来设置样式和事件监听器，因此我希望它会更快，但我从未尝试过。 - MrUpsidown
你尝试过在JavaScript中使用线程吗？？ （function（markeri）{ // 在这里处理事件 }）（标记）; - HoangHieu
我不明白为什么你要“删除和添加这些标记”……用户是否将地图滚动到完全不同的区域，需要创建500个新标记？您只需从非可见区域删除标记并添加一些新标记吗？您能否通过重新定位旧标记来避免使用“new google.maps.Marker()”？ - TonyWilk
为了简单起见，我们总是移除和添加所有内容。我们可以实现一些更复杂的算法来重新绘制只有改变的部分，但正如你所提到的，如果用户滚动足够远，仍然需要完全重新绘制。然而，重新定位是一个有趣的想法。谢谢。 - Michał Fronczyk
4个回答
1
我们通过在标记上启用“优化”标志解决了所有问题。然后，标记在地图画布上呈现，不在DOM中可见，这也意味着它们没有直接附加事件处理程序。当悬停在标记上时，我们通过动态创建div元素来实现交互性。现在一切都更加流畅。
0
没错，但我想避免聚类 - 这就是为什么我将标记数限制为500的原因。要使用该聚类器，我需要从服务器以一个JSON响应返回所有标记（成千上万个）的数据。这会引起新问题 - 对服务器的更多工作，更多的数据传输等，而且大多数标记用户也看不到。 - Michał Fronczyk
0

我几年前实现了一个房地产搜索引擎。想象一下，它是一个股票谷歌地图，上面覆盖着成百上千、数万个标记。

我们发现，在谷歌地图上使用瓦片叠加层是最好的解决方案。叠加层在地图API中得到支持，并且可以用来代替标记，在地图上显示对象，而且延迟最小。对于需要大量标记的用例，它们是很好的替代品。

使用诸如mapserver之类的工具，生成瓦片相当容易。除了瓦片之外，您还需要编写自定义的点击处理程序和可能的Web服务，以将坐标解析为单个标记并返回该标记的数据。

是的，这可能是支持数千个标记的最佳解决方案。然而，我们的标记更具交互性 - 例如，它们具有悬停效果。 - Michał Fronczyk
0

我进行了一些测试，发现使用google.maps.Data类的loadGeoJson方法比使用标准的jQuery AJAX调用要慢。

我使用了一个大约有7000个条目的JSON进行测试，为每个条目创建/绘制一个标记，并在每个标记上绑定了一个点击事件。

以下是Chrome中脚本时间的结果（10个请求的平均值）：

  • 使用loadGeoJson：

平均值：3.156秒 | 最高值：3.69秒 | 最低值：2.75秒

  • 标准AJAX请求：

平均值：1.795秒 | 最高值：2.01秒 | 最低值：1.66秒

如果在您的端口加载500个标记确实很慢，您可能需要公开您的代码，以便我们了解您的操作方式。也许在加载/重新加载/删除标记的方式上有可以改进的地方？

希望这能帮到您！

很高兴知道loadGeoJson速度较慢。您能否比较一下标准的AJAX和手动将要素添加到数据层？（然后您还可以为所有标记绑定一个事件处理程序）- https://developers.google.com/maps/documentation/javascript/reference#Data.Feature它并不是很慢 - 在我的桌面上只有200毫秒。问题在于它会导致我的Ajax处理程序在那段时间内冻结浏览器。我在用户滚动地图或更改某些过滤器时触发该请求，这段时间是可感知的 - 用户体验不够流畅。而且，在移动设备上情况会变得更糟。 - Michał Fronczyk
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接