除非刷新，否则谷歌地图无法正确显示
Posted
技术标签:
【中文标题】除非刷新，否则谷歌地图无法正确显示【英文标题】：google maps not displayed correctly unless refreshing 【发布时间】：2013-07-17 04:43:14 【问题描述】：我正在使用带有 Google Map API 的 JQuery mobile。 除非我刷新页面并且我不明白为什么，否则地图无法正确显示。
这是我的 map.html 文件：
<div data-role="page" id="map-page">
<div data-role="content" id="canvas-map" style="background-color:red"></div>
<script src="js/map.js"></script>
<script type="text/javascript">
var $canvasMap = $('#canvas-map');
$('#canvas-map').on('pagebeforeshow', initMap());
</script>
</div>
还有我的 map.js 文件：
function initMap()
"use strict";
google.maps.visualRefresh = true;
var marker, map,
myLocation = lat:50, lon:-80,
mapOptions =
zoom: 5,
center: new google.maps.LatLng(myLocation.lat, myLocation.lon),
mapTypeId: google.maps.MapTypeId.PLAN,
disableDefaultUI: true
;
$('#canvas-map').css("height", "200px").css("padding", "0px");
map = new google.maps.Map(document.getElementById('canvas-map'), mapOptions);
/** MyPosition **/
marker = new google.maps.Marker(
map: map,
draggable: false,
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(myLocation.lat, myLocation.lon),
);
如果我从另一个页面导航到上面的页面，我会得到以下结果：
然后当我刷新时，我得到了预期的结果：
这显然不是画布的问题，因为它显示（红色）。另外，如果我浏览地图，我可以看到标记显示在正确的位置。 这些屏幕截图是使用谷歌浏览器制作的，我用 Firefox 尝试过，这里的画布完全是红色的，根本没有地图。
PS：这是我原始代码的简单版本，但行为是相同的。
编辑：
有关详细信息，请参阅 Gajotres 的答案，但基本上，在访问 map.html 页面的链接中，添加 target="_blank" 解决了这个问题。请注意，target="_self" 似乎也可以正常工作，这很奇怪，因为它应该是默认值。 目标here的详细信息。
【问题讨论】：
【参考方案1】：google maps v3 框架可以通过 jQuery Mobile 轻松实现。
让我们谈谈这里的问题。您的内容 div 存在高度和宽度问题，主要是因为只有在 pageshow 事件期间才能正确计算页面尺寸。但即便如此，内容 div 也不会覆盖整个页面。
你的问题可以用一点 CSS 来解决：
#content
padding: 0 !important;
position : absolute !important;
top : 40px !important;
right : 0 !important;
left : 0 !important;
height: 200px !important;
基本上你是在强迫你的内容覆盖可用空间。
工作示例：http://jsfiddle.net/RFNPt/2/
最终解决方案：
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<title>MyTitle</title>
</head>
<body>
<div data-role="page" class="page">
<div data-role="content" id="index-content">
<div id="menu">
<a href="map.html" data-role="button" target="_blank">Map</a>
</div>
</div>
</div>
</body>
</html>
map.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<title>MyTitle</title>
</head>
<body>
<div data-role="page" id="map-page">
<div data-role="content" id="content">
<div id="canvas-map" style="height:100%"/>
</div>
<style>
#content
padding: 0 !important;
position : absolute !important;
top : 0 !important;
right : 0 !important;
bottom : 40px !important;
left : 0 !important;
</style>
<script type="text/javascript">
$(document).on('pageshow', '#map-page', function(e, data)
var marker, map,
myLocation =
lat: 50,
lon: -80
,
mapOptions =
zoom: 5,
mapTypeId: google.maps.MapTypeId.PLAN,
center: new google.maps.LatLng(myLocation.lat, myLocation.lon)
;
$('#canvas-map').css("height", "200px").css("padding", "0px");
map = new google.maps.Map(document.getElementById('canvas-map'), mapOptions);
marker = new google.maps.Marker(
map: map,
position: new google.maps.LatLng(myLocation.lat, myLocation.lon),
);
);
</script>
</div>
</body>
</html>
如果您查看此 ARTICLE，您会发现有关此主题的更多信息以及示例。
【讨论】：
使用您的工作示例，我设法重现了该错误。你可以看看这里：jsfiddle.net/leochab/MfhSX 很容易修复，地图必须在正确的页面上初始化，在你的情况下，因为地图是 index2 页面的一部分，它必须在 index2 pageinit 事件期间初始化。 jsfiddle.net/UbhdS/1这是你和我的代码之间的唯一区别。 或者还有一个解决方案，我也会添加到我的答案中。 请注意，在我的本地计算机上，我有 2 个单独的文件：index.html 文件，其中包含指向我加载地图的 map.html 文件的链接。我将所有代码（initMap()）从map.js 移动到map.html，但行为仍然相同。
如果可能的话，你能把这两个文件寄给我，我会在几分钟内修复它。您可以在我的个人资料中找到我的邮件。如果不告诉我，我也会尝试在 2 个单独的文件中模拟它。【参考方案2】：
尝试添加以下代码...
$('#canvas-map').on('pageshow', function()
google.maps.event.trigger(canvas-map, "resize");
);
这将触发调整大小事件并在您的页面上重新加载地图。
【讨论】：
【参考方案3】：为了完整性：绘制地图的动作应该在页面加载后执行，即当页面具有实际的宽度和高度值时，您可以初始化如下：
var map; //declared as global so you can access the map object and add markers dynamically
$("#canvas-map").on( "pageshow", function()
var mapProp =
center:new google.maps.LatLng(53.6721226, -10.547924),
zoom:13,
mapTypeId:google.maps.MapTypeId.ROADMAP
;
map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);
);
无需刷新
【讨论】：
以上是关于除非刷新，否则谷歌地图无法正确显示的主要内容，如果未能解决你的问题，请参考以下文章