JQuery Mobile和Google Maps无法正确呈现 [英] JQuery Mobile and Google Maps Not Rendering Correctly
问题描述
我只是试图在jquery移动页面中显示谷歌地图。如果我直接加载页面，它的作品。但是，如果我从另一个页面导航到页面，它只会呈现单个地图图块。乍看之下，看起来我的问题类似于 https://forum.jquery.com/然而，我已经在'pageinit'事件中执行了我的初始化，而我的地图div有一个设置宽度和高度。
我已经看过 http： //code.google.com/p/jquery-ui-map/ ，但如果可能的话，我宁愿不使用（另一个）第三方插件。
以下是我的网页的样子： <！DOCTYPE HTML>
< html>
< head>
< title> PhoneGap< / title>
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< script src =cordova-1.6.1.js>< / script>
< link rel =stylesheethref =jquery.mobile-1.1.0.min.css/>
< script src =jquery-1.7.1.min.js>< / script>
< script src =global.js>< / script>
< script src =jquery.mobile-1.1.0.min.js>< / script>
< / head>
< body>
< div id =mapPagedata-role =page>
< style type =text / css>
html
{
height：100％;
}
body
{
height：100％;
保证金：0;
padding：0;
}
#map_canvas
{
height：100％;
}
< / style>
< script type =text / javascriptsrc =http://maps.googleapis.com/maps/api/js?key=***API_KEY_REMOVED***&sensor=true>
< / script>
< script type =text / javascript>
函数initialize（）{
var height = $（window）.height（） - 50;
var width = $（window）.width（）;
$（＃map_canvas）。height（height）;
$（＃map_canvas）。width（width）;
var myLatlng = new google.maps.LatLng（39.962799，-82.999802）;
var myOptions = {
center：myLatlng，
zoom：18，
mapTypeId：google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map（document.getElementById（map_canvas），
myOptions）;
// alert（$（map.getDiv（））。width（））;
var marker = new google.maps.Marker（{
position：myLatlng，
map：map，
title：
}）;
google.maps.event.trigger（map，'resize'）
}
$（＃mapPage）。live（'pageinit'，function（）{
initialize（）;
}）;
< / script>
< div data-role =headerid =menuHeader>
< a href =MenuDialog.htmclass =menuLinkdata-role =nonedata-rel =dialog>
< img class =headerIconstyle =height：40px; border-right：1px solid＃333333; padding-right：5px;
id =MenuIconsrc =images / menuIcon.png/>< / a>
< p>
Loc
< / p>
< / div>
< div data-role =content>
< div id =map_canvasstyle =margin-top：50px;>
< / div>
< / div>
< / body>
< html>
预先感谢您的帮助。
更新：
经过一些实验后，我在resize事件中添加了以下延迟：
setTimeout（function（）{
google.maps.event.trigger（map，'resize'）;
}，500）;
这似乎解决了这个问题。希望这可以帮助其他人。
和< body> 在100％的大小，而不是< div> c $ c>< body> 和< div id =map_canvas> 。 尝试将它们添加到您的CSS中（ content >将需要一个 id ）。
您可能还需要确保API通过触发 resize 事件，当一切准备就绪时。只显示一个图块是API错误的典型症状（通常假设它的大小为零）。
I am simply trying to display a google map within a jquery mobile page. If I load the page directly it works. However, if I navigate to the page from another page it only renders a single map tile. At first glance it would appear that my issue was similar to https://forum.jquery.com/topic/google-maps-inside-jquery-mobile
However, I was already performing my initialization within the 'pageinit' event and my map div has a set width and height.
I have seen http://code.google.com/p/jquery-ui-map/ but I would rather not use a (another) third party plugin if at all possible.
Here's what my page looks like:
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="cordova-1.6.1.js"></script>
<link rel="stylesheet" href="jquery.mobile-1.1.0.min.css" />
<script src="jquery-1.7.1.min.js"></script>
<script src="global.js"></script>
<script src="jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div id="mapPage" data-role="page">
<style type="text/css">
html
{
height: 100%;
}
body
{
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas
{
height: 100%;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=***API_KEY_REMOVED***&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var height = $(window).height() - 50;
var width = $(window).width();
$("#map_canvas").height(height);
$("#map_canvas").width(width);
var myLatlng = new google.maps.LatLng(39.962799, -82.999802);
var myOptions = {
center: myLatlng,
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
//alert($(map.getDiv()).width());
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: ""
});
google.maps.event.trigger(map, 'resize')
}
$("#mapPage").live('pageinit', function () {
initialize();
});
</script>
<div data-role="header" id="menuHeader">
<a href="MenuDialog.htm" class="menuLink" data-role="none" data-rel="dialog">
<img class="headerIcon" style="height: 40px; border-right: 1px solid #333333; padding-right: 5px;"
id="MenuIcon" src="images/menuIcon.png" /></a>
<p>
Loc
</p>
</div>
<div data-role="content">
<div id="map_canvas" style="margin-top: 50px;">
</div>
</div>
</body>
<html>
Thanks in advance for you help.
Update:
After some experimenting I added the following delay to my resize event:
setTimeout(function() {
google.maps.event.trigger(map,'resize');
}, 500);
This seemed to fix the issue. Hopefully this helps someone else.
You have <html> and <body> at 100% size, but not the <div>s in the hierarchy between <body> and <div id="map_canvas">.
Try adding those to your CSS as well (the content one will need an id).
You may also need to ensure that the API knows the size of the map <div> by triggering a resize event when everything is ready. Showing only a single tile is a classic symptom of the API getting it wrong (and generally assuming it has zero size).
这篇关于JQuery Mobile和Google Maps无法正确呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
