Cordova 类页面应用中的多个 google 地图

Question

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

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

还有其他解决办法吗？

Answer 1

如何将您的地图保留在与页面分开的单个 <div> 上，并且只要 "page" 需要它就始终位于顶部（例如，通过拆分页面和映射到两个 Angular 控制器并使用根控制器上的事件来同步它们）？

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

否则，如果 google 地图不是必需的，我已经使用 Leaflet.js 构建了一个包含多个地图的基于页面的 Angular 应用程序，并且运行良好。

Answer 2

为什么不能使用 Google maps JS API 拥有多个地图实例？可以使用 API。还是您自己创建了该要求？

多个地图工作的示例（需要 API 键）：

var maps = [];
function initMaps(){

 for(var i = 0; i < 3; i++){
  maps.push(new google.maps.Map(document.getElementById('map' + i), {
   zoom: 10,
   center: new google.maps.LatLng(40.740, -74.18),
   mapTypeId: google.maps.MapTypeId.ROADMAP
  }));
 }

}

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMaps"
    async defer></script>
<body style="margin:0px; padding:0px;" >
  <div id="map0" style="clear:both;float:left;height:200px; width:500px;"></div>
  <div id="map1" style="clear:both;float:left;height:200px; width:500px;"></div>
  <div id="map2" style="clear:both;float:left;height:200px; width:500px;"></div>
</body>

编辑

您只需在每次出现地图时触发 google.maps.event.trigger(map[i], "resize")。因为如果地图 div 或地图 div 的任何父级 div 位于 display:none div 内，地图视图将无法正常工作，直到您调用调整大小就可以了。

Cordova 类页面应用中的多个 google 地图

Multiple google maps in Cordova page-like app

javascript

google-maps

user-experience

cordova