将标记延迟加载到Google Maps Javascript API地图的策略

Question

我正在构建一个ASP.NET MVC网站,我想要一个Google Maps Javascript API地图,显示通过AJAX从我的后端加载的标记.

由于我不希望客户端遇到内存问题,我想延迟加载标记并将它们应用到Fluster2以将它们放入集群中.我认为延迟加载标记的最佳方法是idle在Map 的事件中添加一个事件监听器,该事件发生在平移或缩放地图之后.

这是我目前的策略:

但是,这可能会产生问题,因为旧点不会被丢弃.我不想丢弃它们,因为我不想再次加载它们,但是根据我目前的策略,我将第二次加载它们并再次为它们创建标记.

虽然我认为以某种方式告诉AJAX调用中的后端我已经有了一些标记并不是一个好主意,但是实现某种不允许重复的哈希表会很好.

这样,当我加载点时,我可以先尝试将它们添加到哈希表中:如果成功,我还没有显示它们,所以我可以将它们添加为标记; 如果它失败了,它们已经在地图上了.

这是一个好策略吗？如果是这样,我如何实现不允许重复的哈希表？

Answer 1

我最近实现了一些非常类似的东西；虽然我个人选择删除所有标记并完全重新填充地图，但我实际上喜欢您的整体策略，并认为这也可能使用户体验更加流畅，因为删除所有标记和添加新标记之间的短暂闪烁消失了。所以，是的，我想说这是一个很好的策略。

空闲是一个有趣的事件；我发现 onZoom 等效果不是特别好，所以选择了 TileLoaded （或类似的）。对我来说效果很好，但看起来有点像黑客。

关于您的哈希表问题 - 有两个可能的位置可以存储这样的地图。

a) 服务器如果您可以跟踪将坐标发送到哪个页面，则可以在会话状态中保留标记的 dotnet 哈希表。这可能会阻止您向客户端发送不必要的坐标，但在我看来更容易出错

b) 客户无论如何，这可能是您想要的。在这里，一个普通的 Javascript 关联数组应该是你的朋友。

var x = {"some key": "some value"};
document.write ("some key" in x); // True
document.write ("some other key" in x); // False

除非您找到将 lat 和 lng 映射到单个可哈希值的好方法，否则您可能必须保留数组的数组：

var markers = {lat1: {lng11: 1, lng12: 1, lng13: 1}, lat2: ...}

然后检查像

...
if (checklat in markers)
   if (checklng in markers[checklat])
       return True
return False

我只是发现这是一个较旧的问题。太晚了，也许它仍然有帮助。