5

我正在使用 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" alt="logo"/></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>

我提到了这个和这个问题，但它不适用于我的代码。

4

5 回答 5

8

问题

首先，您为什么使用 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" alt="logo"/></a>
            </div>
            <div id="content">
                <div id="map-canvas"></div>
            </div>
        </div>  
    </body>
</html>

可以在这篇文章中找到有关此主题的工作示例和更多信息。

于 2013-04-08T08:41:36.943 回答
2

只需添加：data-ajax="false"到链接标签，该标签重定向到包含您的地图的页面。例如，如果 map.aspx 包含您的地图，您可以像这样链接到它：

<a href="map.aspx" data-ajax="false">

于 2014-11-17T04:12:43.480 回答
1

我遇到了同样的问题，但我没有任何 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 指南说要使用它。

于 2016-06-28T10:07:47.710 回答
1

google.maps.event.addDomListener(window, 'load', initialize);我的方法在哪里初始化也有同样的问题 。我之前只添加了几行代码google.maps.event.addDomListener(window, 'load', initialize);

代码是

 $(document).ready( function () {
        initialize();
    });

这段代码对我有用

于 2016-12-09T13:01:40.273 回答
0

您应该使用该pageload事件来加载所有内容。这样，一旦 jquery Mobile 完成了它需要的所有 DOM 更改，一切都会被加载。我遇到了同样的问题，这就是帮助。

$(document).on('pageload', function() {
  initialize();
});

它在文档中： http: //api.jquerymobile.com/pageload/

编辑：有时它也有助于在一个单独的函数中加载标记而不是加载地图。

于 2013-04-08T08:25:42.887 回答