如何减少Angular Web App（agm-core）中的地图调用次数？

Question

我们有一个使用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调用的数量，我们使用新密钥创建了一个单独的环境，并执行了有限的可追溯步骤以标识正确的调用数量。第1..5页的每次点击都被视为一个单独的API调用。

下面是单击[... GCP API /服务->凭据->密钥后的使用情况，单击页面1 ... 5，共12次。

Total usage (last 30 days)
12

我们还查看了“结算”下的“交易”，该数字似乎正确（动态地图通话的费用）。
我们还没有遍历agm-core内的代码，并且正在尝试避免使用Javascript实现自定义类的开销，希望有一种更好的方法来实现。如果我们可以提供更多信息/代码，请提出评论。
我们应该采取什么方法，以便每个会话只花费我们1次地图加载？
谢谢

Answer 1

您无法进行构建，因此用户会话仅花费一次地图加载。 JavaScript API没有基于会话或缓存的选项，这是agm-core库在下面使用的选项。

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

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

希望这会有所帮助！