Fatal编程技术网
  • javascript/
  • Javascript 谷歌地图不是第一次加载

Javascript 谷歌地图不是第一次加载

javascript jquery google-maps jquery-mobile google-maps-api-3

Javascript 谷歌地图不是第一次加载,javascript,jquery,google-maps,jquery-mobile,google-maps-api-3,Javascript,Jquery,Google Maps,Jquery Mobile,Google Maps Api 3,我正在使用GoogleMapsJavaScriptAPI在我的移动网站中加载地图。当我从上一页导航时，地图不会加载，但如果我按预期刷新页面地图，则加载。如果我在主体中使用JavaScript，即使页面没有加载。我想不出这个问题。是否与上一页的代码有关 这是我的头标签代码 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport"

我正在使用GoogleMapsJavaScriptAPI在我的移动网站中加载地图。当我从上一页导航时，地图不会加载，但如果我按预期刷新页面地图，则加载。如果我在主体中使用JavaScript，即使页面没有加载。我想不出这个问题。是否与上一页的代码有关

这是我的头标签代码

<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> 


函数初始化（）{
var mylatng=newgoogle.maps.LatLng（，）；
变量映射选项={
缩放：10，
中心：myLatlng，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“地图画布”），mapOptions）；
var marker=new google.maps.marker({
职位：myLatlng，
地图：地图，
标题：“地点”
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
$（文档）.delegate（'#content'，pageinit'，function（）{
navigator.geolocation.getCurrentPosition（初始化）；
});
这是我的身体标签

<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>



但是它不适用于我的代码。
您应该使用
pageload
事件加载所有内容。这样，一旦jquerymobile完成了所需的所有DOM更改，就可以加载所有内容。我也遇到过同样的问题，这就是帮助我的原因


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


在文档中：

编辑：有时，在一个单独的函数中加载标记比加载地图的函数更有帮助。

首先，为什么要使用jQuery Mobile？我看不出你现在的例子有什么意义

在这种情况下，jquerymobile是主要问题。因为使用了jQuery Mobile，所以所有内容都将加载到DOM中。当您“从上一页导航”时，页面不会刷新，此行：


google.maps.event.addDomListener(window, 'load', initialize);


无法触发。仅当手动刷新页面时，才会触发

第二件事，你不能在没有任何页面的情况下使用jQuery移动页面事件。在代码中有以下部分：


$(document).delegate('#content', 'pageinit', function () {
    navigator.geolocation.getCurrentPosition(initialize);
});


要成功初始化id为的div，内容必须具有另一个名为data role=“page”的属性，如下所示：


<div id="content" data-role="page">

</div>






第三件事。让我们假设其他一切都好。Pageinit不会从头部触发。当jquerymobile加载页面时，它会将页面加载到DOM中，并且只加载主体部分。因此，为了使映射正常工作，您需要将javascript移动到主体（包括css）。在第一个示例中，它不起作用，因为您甚至在非页面div容器上触发了页面

最后一件事，如果您想正确使用jQuery Mobile，您需要注意正确版本的jQuery与正确版本的jQuery Mobile一起使用。如果希望安全，请将JQ1.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>   




jQM复杂演示
#地图画布{
宽度：300px；
高度：300px；
}
函数初始化（）{
var mylatng=new google.maps.LatLng（33.89342，-84.30715）；
变量映射选项={
缩放：10，
中心：myLatlng，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“地图画布”），mapOptions）；
var marker=new google.maps.marker({
职位：myLatlng，
地图：地图，
标题：“地点”
});
}
//google.maps.event.addDomListener（窗口“加载”，初始化）；
$（document）.on（'pageshow'，'#wrapper'，函数（e，data）{
初始化（）；
});             
试验


有关此主题的工作示例和更多信息可在此
中找到，只需将：
data ajax=“false”
添加到链接标签，该标签将重定向到包含地图的页面。例如，如果map.aspx包含您的地图，您可以如下链接到它：


<div id="content" data-role="page">

</div>




我也遇到了同样的问题，但我没有任何jquery mobile Librarray或任何其他与地图冲突的东西。在艰难的日子里，我为我的项目找到了一个解决方案：

不起作用：


<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" async defer>
</script>






工作（删除异步和延迟属性）：






希望！如果其他解决方案不起作用，这会对某人有所帮助。只有在其他解决方案都不起作用的情况下才尝试此方法，因为我们知道google page speed guide或google map api guide说使用它不是一个好建议。
我也有同样的问题

google.maps.event.addDomListener（窗口“加载”，初始化）其中initialize是我的方法。
我只是在
google.maps.event.addDomListener（窗口'load'，initialize'）之前添加了几行代码

代码是


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



这个代码对我有用
这永远不会有用。pageload事件只有在使用pageload函数将外部页面加载到DOM中时才起作用。我的印象是，所有页面都作为某种“外部”页面加载到jQueryMobile的DOM中。因为在问题中没有，所以我想当然地认为这是在第一页之外。您是正确的，但是只有在使用$.mobile.loadPage函数加载页面时，才会触发pageload。我认为他没有走那么远，仍然没有为我工作。我们完全使用了您的代码，但它仍然采用了上一页的css样式，并且没有加载地图