javascript 除非刷新，否则谷歌地图无法正确显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17719958/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
google maps not displayed correctly unless refreshing
提问by leochab
I am using JQuery mobile with the Google Map API. The map is not displayed properly unless I refresh the page and I don't understand why.
我正在将 JQuery Mobile 与 Google Map API 一起使用。除非我刷新页面并且我不明白为什么，否则地图无法正确显示。
here is my map.html file:
这是我的 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>
and my map.js file:
和我的 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),
});
}
If I navigate from another page to the above page, I get the following result:
如果我从另一个页面导航到上述页面，我会得到以下结果：
And then when I refresh, I get the expected result:
然后当我刷新时，我得到了预期的结果：
It is obviously not a problem with the canvas, since it is displayed (in red). Plus,if I navigate trhough the map, I can see the marker displayed at the right position. These screenshots were made using Google Chrome, I tried with Firefox and the canvas is here completely red, no map at all.
这显然不是画布的问题，因为它是显示的（以红色显示）。另外，如果我通过地图导航，我可以看到显示在正确位置的标记。这些屏幕截图是使用 Google Chrome 制作的，我尝试使用 Firefox，这里的画布完全是红色的，根本没有地图。
PS: this is a simple version of my original code, but the behavior is the same.
PS：这是我原始代码的简单版本，但行为是相同的。
EDIT:
编辑：
See Gajotres' answer for details, but basically, within the link to access map.html page, adding target="_blank"solved the issue. Note that target="_self"seems to work as well, strange since it is supposed to be the default value. Details on targethere.
有关详细信息，请参阅 Gajotres 的回答，但基本上，在访问 map.html 页面的链接中，添加target="_blank"解决了该问题。请注意，这target="_self"似乎也有效，很奇怪，因为它应该是默认值。关于目标的详细信息在这里。
回答by Gajotres
There's a trick how google maps v3framework can be easily implemented with jQuery Mobile.
google maps v3使用 jQuery Mobile 可以轻松实现框架有一个技巧。
Lets talk about the problems here. your content div has a height and width problem, mainly because only time page dimensions can be calculated correctly is during the pageshowevent. But even then content div will not cover full page.
让我们谈谈这里的问题。您的内容 div 存在高度和宽度问题，主要是因为只有在pageshow事件期间才能正确计算页面尺寸。但即便如此，内容 div 也不会覆盖整页。
Your problem can be solved with a little bit of CSS :
你的问题可以用一点 CSS 来解决：
#content {
padding: 0 !important;
position : absolute !important;
top : 40px !important;
right : 0 !important;
left : 0 !important;
height: 200px !important;
}
Basically you are forcing your content to cover available space.
基本上，您是在强迫您的内容覆盖可用空间。
Working example: http://jsfiddle.net/RFNPt/2/
工作示例：http: //jsfiddle.net/RFNPt/2/
Final solution :
最终解决方案：
index.html
索引.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
地图.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>
If you take a look at this ARTICLEyou will find much more information regarding this topic plus examples.
如果你看一下这篇文章，你会发现更多关于这个主题的信息和例子。
回答by Dipen Dedania
Try to add following code...
尝试添加以下代码...
$('#canvas-map').on('pageshow', function(){
google.maps.event.trigger(canvas-map, "resize");
});
this will fire resize event and reload the map on your page.
这将触发调整大小事件并在您的页面上重新加载地图。
回答by beRoberto
Just for completeness: The action of drawing the mapshould be performed after the page loads, that is when the page has actual values for width and height and you can initialize it as follows:
只是为了完整性：绘制地图的动作应该在页面加载后执行，即当页面具有实际的宽度和高度值时，您可以将其初始化如下：
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);
});
No refresh needed
无需刷新
