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

我正在开发基于Cordova的移动应用程序，主要目的是显示和选择谷歌地图中的位置。该应用程序设计成类似于页面的，因此每个页面都有100%的高度和宽度以及下一页和下一页的导航按钮。每个页面内部都应该有地图，但这是个问题，因为我只能有一个谷歌地图的实例。我怎样才能解决这个问题？我有两个想法：

使用静态地图API并在每页的地图画布div上创建临时覆盖。这给用户带来了快速性的狂热。当用户单击next时，下一页会向上滑动，他应该会看到API中的地图图像。覆盖后的Div将替换为交互式谷歌地图

使用某种加载屏幕。这对我来说不是一个好的解决方案，因为UX。用户失去快速感

---

还有其他解决方案吗？

如何将地图放在一个独立于页面的

上，只要有“页面”需要它，就始终保持在顶部（例如，将页面和地图拆分为两个角度控制器，并使用根控制器上的事件来同步它们）

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

---

否则，如果谷歌地图不是必需的，我已经用ployate.js构建了一个基于角度页面的应用程序，其中包含多个地图，它工作得非常好。

将地图放在一个单独的

页面上，该页面与页面分开，只要有“页面”需要它，它就始终位于顶部（例如，将页面和地图拆分为两个角度控制器，并使用根控制器上的事件来同步它们）

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

---

否则，如果google maps不是一个要求，我已经使用flipal.js构建了一个基于角度页面的应用程序，其中包含多个地图，效果非常好。

为什么不能使用google maps js API创建多个地图实例呢？可以使用API。或者是您自己创建了这个要求

多个映射工作的示例（需要API密钥）：

var映射=[]；
函数initMaps（）{
对于（变量i=0；i<3；i++）{
maps.push（新的google.maps.Map（document.getElementById（'Map'+i））{
缩放：10，
中心：新google.maps.LatLng（40.740，-74.18），
mapTypeId:google.maps.mapTypeId.ROADMAP
}));
}
}

---

为什么不能有多个使用Google maps JS API的地图实例？可以使用API。或者是您自己创建的需求

多个映射工作的示例（需要API密钥）：

var映射=[]；
函数initMaps（）{
对于（变量i=0；i<3；i++）{
maps.push（新的google.maps.Map（document.getElementById（'Map'+i））{
缩放：10，
中心：新google.maps.LatLng（40.740，-74.18），
mapTypeId:google.maps.mapTypeId.ROADMAP
}));
}
}

是的，我创建了这个要求。很可能地图会有类似的内容，但API会多次下载此内容，我们希望用户能够安全地使用移动数据。在这种情况下，是的，谷歌地图不适合您。他们在地图磁贴图像上没有缓存头，而且服务条款禁止缓存。是的我创建了这个要求。很可能地图会有类似的内容，但API会多次下载此内容，我们希望用户能够安全地使用移动数据。在这种情况下，是的，谷歌地图不适合您。他们在地图磁贴图像上没有缓存头，而且服务条款禁止缓存这些内容。谢谢你你的解决方案。我不熟悉Angular，所以我将尝试将页面拆分为多个部分，并仅为非地图部分设置动画。感谢你的解决方案。我不熟悉Angular，因此我将尝试将页面拆分为多个部分，并仅为非地图部分设置动画。