Cordova 类似页面的应用程序中的多个谷歌地图
Posted
技术标签:
【中文标题】Cordova 类似页面的应用程序中的多个谷歌地图【英文标题】：Multiple google maps in Cordova page-like app 【发布时间】：2016-05-19 09:37:50 【问题描述】：我正在开发基于 Cordova 的移动应用程序，主要目的是显示和从 Google 地图 中选择位置。应用程序被设计成Page like，因此每个页面都有 100% 的高度和宽度以及导航按钮 Next 和 Back。每个页面都应该有地图，但这是个问题，因为我可以只有一个 Google 地图实例。我怎么能解决这个问题？我有两个想法：
-
使用 Static Maps API 并在每个页面的 map-canvas div 上创建临时叠加层。这给用户带来了快捷的感觉。当用户单击下一步时，下一页向上滑动，他应该看到来自 API 的地图图像。覆盖层后面的 div 将被替换为交互式 Google 地图。
使用某种加载屏幕。由于 UX，这对我来说不是一个好的解决方案。用户失去敏捷感。
还有其他解决办法吗？
【问题讨论】：
【参考方案1】：如何将您的地图保留在与页面分开的单个<div> 上，并且只要有需要它的“页面”始终保持在顶部（例如，通过将页面和地图拆分为两个 Angular 控制器和使用根控制器上的事件来同步它们）？
另一个解决方案是，因为页面听起来与它们的导航元素相似，所以您更改加载逻辑并且只更改内容而不是每次加载整个页面。
否则，如果不需要 google 地图，我已经使用 Leaflet.js 构建了一个基于 Angular 页面的应用程序，其中包含多个地图，它工作得非常好。
【讨论】：
感谢您的解决方案。我对 Angular 不熟悉，所以我会尝试将我的页面拆分为多个部分并仅对非地图部分进行动画处理。【参考方案2】：为什么不能使用 Google 地图 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 内，则地图视图将无法正常工作，除非您对其调用 resize。
【讨论】：
是的，我创建了需求。很有可能，地图会有类似的内容，但 API 会多次下载此内容，我们希望确保用户使用移动数据的安全。 在这种情况下是的，谷歌地图不适合你。他们在地图切片图像上放置了无缓存标题，而且服务条款禁止缓存它们。以上是关于Cordova 类似页面的应用程序中的多个谷歌地图的主要内容，如果未能解决你的问题，请参考以下文章
我可以将原生 GoogleMap 添加到我的 Cordova 混合应用程序吗？
谷歌地图不适用于 ionic cordova run android