谷歌地图第一次没有加载
Posted
技术标签:
【中文标题】谷歌地图第一次没有加载【英文标题】：Google Map is not loading for the first time 【发布时间】：2013-03-30 03:46:43 【问题描述】：我正在使用 Google Maps javascript API 在我的移动网站中加载地图。当我从上一页导航时，地图不会加载，但如果我按预期刷新页面地图加载。如果我在正文中使用 JavaScript，即使页面没有加载。我无法弄清楚问题所在。是不是和上一页代码有关？
这是我在 Head 标记中的代码。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.1.0.min.css" />
<link href="css/site.css" rel="stylesheet" type="text/css" />
<script src="./js/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=xxxxxxxx&sensor=false">
</script>
<script type="text/javascript">
function initialize()
var myLatlng = new google.maps.LatLng(<?php echo $longtitude ?>, <?php echo $latitude ?>);
var mapOptions =
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
;
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var marker = new google.maps.Marker(
position: myLatlng,
map: map,
title: 'Location'
);
google.maps.event.addDomListener(window, 'load', initialize);
$(document).delegate('#content', 'pageinit', function ()
navigator.geolocation.getCurrentPosition(initialize);
);
</script>
</head>
这是我的身体标签
<body >
<div id="wrapper">
<div class="header">
<a href="index.html"><img src="images/logo-small.png" /></a>
</div>
<div class="back">
<a data-rel="back"><img src="images/back.png"/></a>
</div>
<div id="content">
<div class="list">
<div class="list-items" id="info">
<?php echo "<h3>$sa1<span>$postcode<span>$sa2</span></span></h3><h2>$price</h2>";?>
<br class="clear" />
<br class="clear" />
</div>
</div>
<br class="clear" />
<div id="map-canvas">
</div>
</div>
</div>
</body>
我提到了问题 This 和 This，但它不适用于我的代码。
【问题讨论】：
你试过地图页面链接上的data-ajax="false"吗？
【参考方案1】：
问题
首先，您为什么使用 jQuery Mobile？我在您当前的示例中看不到重点。
在这种情况下，jQuery Mobile 是主要问题。因为使用了 jQuery Mobile，所以所有内容都将加载到 DOM 中。当您“从上一页导航”页面未刷新并且此行：
google.maps.event.addDomListener(window, 'load', initialize);
无法触发。只有手动刷新页面才会触发。
第二件事，你不能在没有任何页面的情况下使用 jQuery Mobile 页面事件。在您的代码中，您有这部分：
$(document).delegate('#content', 'pageinit', function ()
navigator.geolocation.getCurrentPosition(initialize);
);
要成功初始化具有 id 内容的 div，必须具有另一个名为 data-role="page" 的属性，如下所示：
<div id="content" data-role="page">
</div>
第三件事。让我们假设其他一切都很好。 Pageinit 不会从 HEAD 触发。当 jQuery Mobile 加载页面时，它会将它们加载到 DOM 中，并且只会加载 BODY 部分。因此，要使您的地图正常工作，您需要将我们的 javascript 移动到 BODY（包括 css）。在您的第一个示例中，它不起作用，因为您甚至在非页面 div 容器上也触发了页面。
最后，如果您想正确使用 jQuery Mobile，您需要注意正确版本的 jQuery 与正确版本的 jQuery Mobile 一起使用。如果你想安全使用 jQ 1.8.3 和 jQM 1.2
解决方案
这是一个可行的解决方案：
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<style>
#map-canvas
width: 300px;
height: 300px;
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
function initialize()
var myLatlng = new google.maps.LatLng(33.89342, -84.30715);
var mapOptions =
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
;
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var marker = new google.maps.Marker(
position: myLatlng,
map: map,
title: 'Location'
);
//google.maps.event.addDomListener(window, 'load', initialize);
$(document).on('pageshow', '#wrapper', function(e, data)
initialize();
);
</script>
<div id="wrapper" data-role="page">
<div class="header">
<h3>Test</h3>
<a href="index.html"><img src="images/logo-small.png" /></a>
</div>
<div id="content">
<div id="map-canvas"></div>
</div>
</div>
</body>
</html>
有关此主题的工作示例和更多信息可以在此ARTICLE中找到。
【讨论】：
仍然不适合我。我们完全使用了您的代码，但它仍然采用上一页的 css 样式，根本不加载地图。但是，当我们刷新地图加载时，没有您在代码中提到的任何外部样式。 可以在 pageshow 事件中添加警报吗？这将告诉我们事件是否成功触发。 是的，全部复制并粘贴到新文件中。但新文件仍然获得上一页的 CSS 样式。我认为它继承自上一页。【参考方案2】：只需将：data-ajax="false" 添加到链接标签即可重定向到包含您的地图的页面。例如，如果 map.aspx 包含您的地图，您可以像这样链接到它：
<a href="map.aspx" data-ajax="false">【讨论】：
【参考方案3】：我遇到了同样的问题，但我没有任何 jquery-mobile 图书馆或任何其他会与地图冲突的东西。苦苦挣扎，我为我的项目找到了解决方案：
不起作用：
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" async defer>
</script>
作品（移除 async 和 defer 属性）：
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
希望！如果其他解决方案不起作用，这会对某人有所帮助。仅当其他解决方案都不起作用时才尝试此操作，因为这不是一个好的建议，因为我们知道谷歌页面速度指南或谷歌地图 api 指南说要使用它。
【讨论】：
【参考方案4】：我也有同样的问题
google.maps.event.addDomListener(window, 'load', initialize); 其中初始化是我的方法。
我只是在google.maps.event.addDomListener(window, 'load', initialize);之前添加几行代码
代码是
$(document).ready( function ()
initialize();
);
这段代码对我有用
【讨论】：
【参考方案5】：您应该使用pageloadevent 来加载所有内容。这样，一旦 jquery Mobile 完成了它需要的所有 DOM 更改，一切都会被加载。我也遇到过同样的问题，这对我有帮助。
$(document).on('pageload', function()
initialize();
);
在文档中：http://api.jquerymobile.com/pageload/
编辑：有时，在单独的函数中加载标记而不是加载地图也有帮助。
【讨论】：
这永远行不通。只有在使用 pageload 函数将外部页面加载到 DOM 中时，pageload 事件才会起作用。 我的印象是所有页面都作为某种“外部”页面加载到 jQueryMobile 的 DOM 中。由于在问题中没有 我理所当然地认为这是在第一页之外。 你是对的，但是只有在使用 $.mobile.loadPage 函数加载页面时才会触发页面加载。而且我认为他没有走那么远。以上是关于谷歌地图第一次没有加载的主要内容，如果未能解决你的问题，请参考以下文章