科尔多瓦页面类应用程序中的多个谷歌地图

Multiple google maps in Cordova page-like app

本文关键字：应用程序 谷歌地图      更新时间：2023-09-26

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

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

还有其他解决方案吗？

如何将

您的地图保存在与页面分开的单个<div>上，只要有一个"页面"需要它(例如，通过将页面和地图拆分为两个 Angular 控制器并使用根控制器上的事件来同步它们(？

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

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

为什么你不能使用谷歌地图 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:nonediv 内，则地图视图将无法正常工作，直到您对其调用调整大小。

相关文章：