javascript - Cordova 类似页面的应用程序中的多个谷歌地图

Question

我正在开发基于Cordova的移动应用程序，主要目的是从Google map 显示和选择位置。应用程序被设计为类似页面，因此每个页面都有 100% 的高度和宽度以及导航按钮“下一步”和“后退”。每个页面都应该有 map ，但这是个问题，因为我只能只有一个 Google map 实例。我该如何解决这个问题？我有两个想法:

1. 使用静态 map API，并在每个页面的 map Canvas div 上创建临时叠加层。这给用户带来快捷的感觉。当用户点击下一步时，下一页会向上滑动，他应该看到来自 API 的 map 图像。覆盖层后面的 Div 将被替换为交互式 Google map 。
2. 使用某种加载屏幕。由于用户体验，这对我来说不是一个好的解决方案。用户失去了快捷感。

还有其他解决办法吗？

Answer 1

如何将您的 map 保留在一个 <div> 上？它与页面分离，并且只要有一个“页面”需要它就始终保持在顶部(例如，通过将页面和 map 拆分为两个 Angular Controller 并使用根 Controller 上的事件来同步它们)？

另一个解决方案是，因为页面听起来与其导航元素相似，所以您可以更改加载逻辑，只更改内容，而不是每次加载整个页面。

否则，如果不需要 google map ，我已经使用 Leaflet.js 构建了一个包含多个 map 的基于 Angular 页面的应用程序，并且它工作得很好。