我已经在一个项目上工作了几个月，而且我已经在那里使用了google maps api。它工作正常，直到我添加了另一张地图。 在原始项目中，其中一个地图正在加载正常，但第二个（在不同的页面html文件上）只是没有显示地图（有谷歌徽标和使用条款和东西。但不是地图） 我决定重新创建问题只是为了在这里显示它，看起来在这个版本上，两个地图都不会出现。
所以我需要存档：
这就是我在原始项目中所拥有的。 我在压缩版本（问题娱乐）中做了几乎相同的事情，除了我只使用2个链接导航到map1.html和map2.html
既不显示地图（只显示谷歌徽标和内容）。
以下是代码：
的index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js"></script>
<script language="javascript" type="text/javascript" src="./maps.js"></script>
</head>
<body>
<link rel="stylesheet" type="text/css" href="./overCSS/login.css"/>
<div data-role="page" id="page1" data-theme="a">
<div data-role="main" class="ui-content">
<h1 align="center">help pl0x?</h1>
<ul>
<li>
<a href="./map1.html" data-transition="slidedown">This link will move to the map1.html</a>
</li>
<li>
<a href="./map2.html" data-transition="slidedown">This link will move to the map2.html</a>
</li>
</ul>
</div>
</div>
</body>
</html>
map1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<div data-role="page" id="map1" data-theme="a">
<div id="mapAvailable" style="width: 300px; height: 300px;"></div>
<a href="./index.html" data-transition="slidedown">Go back</a>
<script>
initMap();
</script>
</div>
</body>
</html>
map2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<div data-role="page" id="map2" data-theme="a">
<div id="mapSearch" style="width: 300px; height: 300px;"></div>
<a href="./index.html" data-transition="slidedown">Go back</a>
<script>
initMap();
</script>
</div>
</body>
</html>
maps.js
var mapAvailable;
var mapSearch;
function initMap() {
//init position
var latlng = new google.maps.LatLng(31.2535598, 34.7769184);
var moptions = {
center: latlng,
zoom: 13
};
//init map
if(document.getElementById('mapAvailable')!= null) {
console.log("MapAvailable isn't null");
mapAvailable = new google.maps.Map(document.getElementById('mapAvailable'), moptions);
}
if(document.getElementById('mapSearch')!= null) {
console.log("MapSearch isn't null");
mapSearch = new google.maps.Map(document.getElementById('mapSearch'), moptions);
}
//Marker
var marker = new google.maps.Marker({
position: latlng,
mapAvailable: mapAvailable,
title: 'Wussup'
});
}
希望我提供足够的信息！ 请帮帮我？
答案 0 :(得分：0)
像这样包裹你的initMap();来电：
$('body').on('pagecontainershow', function() {
initMap();
});
要了解正在发生的事情，我们必须牢记在JQuery Mobile网站中如何进行导航。触发导航时，新页面的内容将加载到DOM中，并且＆＃34; the currently visible page is hidden, and another page is shown. Moving from one page to another is accomplished via a transition.＆＃34;
新加载页面正文中的所有内容都将按预期运行，包括执行JavaScript。这一切都在页面加载后发生，这发生在页面实际转换到视口并变得可见之前。这个操作顺序是造成地图问题的原因。
为了提高性能，谷歌地图脚本做了一些非常聪明的事情，它只会渲染最初对用户可见的地图部分。
由于页面在加载并且调用initMap()函数时不在视口内，因此map div的任何部分实际上都不可见。脚本看到了，即使它生成了map元素，它也不会加载或渲染其中的任何实际地图。
为了让地图完全加载和渲染，我们希望延迟调用initMap()函数，直到页面完全转换到视口并且可见。为了做到这一点，我们将监听"pagecontainershow" event（在页面完成转换动画后触发），然后调用initMap()函数。