1

我们有一个使用 Angular 制作的简单应用程序，它有 5 个页面，每个页面都有 Google 地图。我们迁移到 Angular 的原因是，我们可以将每个用户会话的 Map 调用次数减少到只有 1 个（在基于 javascript 的应用程序中，每个会话最多 20 个！）。

然而，我们的实现仍然需要与访问这些页面的次数一样多的地图调用，我们想知道我们做错了什么。

这是我们的设置：

  • 我们使用的是 agm-core 库（而不是直接使用 JS 脚本）我们将我们的应用程序分为 5 个子组件（每个页面都有自己的组件）和一个主组件：/home。地图在与 Home 组件同级的单独组件中导入

  • 我们还允许用户隐藏地图。为此，我们尝试了两件事：1.) 将地图高度/宽度设置为零。2.) 将地图推出屏幕边界，并在用户想看时将其带回来。

我们的组件结构：

- map-div
- home
  - page1
  - page2
  - page3
  - page4
  - page5

点击每个页面不应再次初始化map-div，但是，在测试并查看 GCP 中的 API 调用之后，我们意识到每次页面点击仍然计入 Map 调用。

注意：为了测试 API 调用的数量，我们使用新密钥创建了一个单独的环境，并执行了有限的、可追溯的步骤来识别正确的调用数量。对 Pages 1..5 的每次点击都算作一次单独的 API 调用。

以下是点击第 1...5 页后GCP API/Services -> Credentials -> Key上显示的用法 ，共 12 次。

Total usage (last 30 days)
12

我们还查看了 Billing 下的 Transactions，数字似乎是正确的（Dynamic Map 调用的费用）。

我们还没有仔细研究 agm-core 中的代码，并试图避免使用 Javascript 实现自定义类的开销，希望一定有更好的方法来做到这一点。如果我们可以包含更多信息/代码，请提出评论。

我们应该采取什么方法使每个会话只花费我们 1 次地图加载？

谢谢

4

2 回答 2

0

您无法构建它，以便用户会话只需 1 次地图加载。JavaScript API 没有基于会话或缓存的选项，这是 agm-core 库在下面使用的。

地图加载意味着每次使用google.maps.Map()该类创建地图时。即使您“隐藏”地图，如果您仍然创建它，那么这很重要。加载地图的每次网页刷新都很重要。因此，如果这些页面中的每一个都加载一个地图，那么预计每次访问该页面时地图加载的数量都会增加（无论它是否是相同的用户会话）。

如果您想降低成本，除了从不需要显示地图的网页中删除地图创建之外，我建议您按照此常见问题解答设置每日配额限制和预算警报。

于 2020-05-31T09:59:36.607 回答
0

如果其他人发现它有用，请发布我们的解决方案。

我们无法使用 agm-core maps 类来完成此操作。相反，我们使用 Google Maps Javascript 创建了自己的自定义类。

通过这样做，我们能够减少地图调用，并将其限制为每个用户会话一次（无论用户在我们的 Web 应用程序中访问了多少页面）。

于 2020-10-28T02:35:01.770 回答