javascript - 将标记延迟加载到 Google Maps Javascript API map 中的策略

Question

我正在构建一个 ASP.NET MVC 站点，我希望在该站点上有一个 Google Maps Javascript API map ，该 map 显示通过 AJAX 从我的后端加载的标记。

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

---

这是我目前的策略:

1. 将事件监听器添加到 idle 事件。
2. 当 idle 事件被抛出时，使用 jQuery 对我的后端进行 AJAX HTTP POST 调用，提供 map 的当前视口(viewport)/边界。
3. 后端返回视口(viewport)内的所有点。
4. 这些点被创建为标记并添加到 Fluster2，Fluster2 将它们添加到 map 。旧点不会被丢弃。
5. 重复

---

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

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

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

---

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

Answer 1

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

空闲是一个有趣的事件；我发现 onZoom 等并没有特别好地工作并解决了 TileLoaded (或类似)。对我来说工作正常，但看起来有点像 hack。

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

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

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

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

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