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,我正在使用jquerymobile和googlemapapi。 除非我刷新页面，否则地图不会正确显示，我不明白为什么 这是我的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"><

我正在使用jquerymobile和googlemapapi。 除非我刷新页面，否则地图不会正确显示，我不明白为什么

这是我的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>
如果我从另一个页面导航到上面的页面，我会得到以下结果：

然后当我刷新时，我会得到预期的结果：

这显然不是画布的问题，因为它是以红色显示的。另外，如果我在地图上导航，我可以看到标记显示在正确的位置。 这些截图是用Google Chrome制作的，我用Firefox试过了，画布完全是红色的，根本没有地图

PS：这是我的原始代码的一个简单版本，但行为是一样的

编辑：
有关详细信息，请参见Gajotres的回答，但基本上，在访问map.html页面的链接中，添加了
target=“\u blank”
解决了问题。请注意，
target=“\u self”
似乎也能工作，这很奇怪，因为它应该是默认值。有关目标的详细信息请尝试添加以下代码

$('#canvas-map').on('pageshow', function(){
    google.maps.event.trigger(canvas-map, "resize");
});
这将触发resize事件并在您的页面上重新加载地图。

有一个诀窍，
GoogleMapsV3
框架可以通过jQuery Mobile轻松实现

让我们谈谈这里的问题。您的content div存在高度和宽度问题，主要是因为只有在pageshow事件期间才能正确计算页面尺寸。但即便如此，内容部门也不会覆盖整个页面

您的问题可以通过一点CSS解决：

#content {
    padding: 0 !important;
    position : absolute !important; 
    top : 40px !important;  
    right : 0 !important; 
    left : 0 !important;     
    height: 200px !important;
}
基本上，您是在强制您的内容覆盖可用空间

工作示例：

最终解决方案： index.html 

我的头衔
map.html 

我的头衔
#内容{
填充：0！重要；
位置：绝对！重要；
顶部：0！重要；
右：0！重要；
底部：40px！重要；
左：0！重要；
}       
$（文档）.on（'pageshow'，'#map page'，函数（e，数据）{
变量标记，映射，
myLocation={
拉丁美洲：50，
朗：-80
}, 
mapOptions={
缩放：5，
mapTypeId:google.maps.mapTypeId.PLAN，
中心：新的google.maps.LatLng（myLocation.lat，myLocation.lon）
}; 
$（“#画布地图”）.css（“高度”，“200px”）.css（“填充”，“0px”）；
map=new google.maps.map（document.getElementById（'canvas-map'），mapOptions）；
marker=新的google.maps.marker（{
地图：地图，
位置：新的google.maps.LatLng（myLocation.lat，myLocation.lon），
});     
});
如果您查看此，您将发现有关此主题的更多信息和示例。

仅为完整起见：绘制地图的操作应在页面加载后执行，也就是说，当页面具有实际的宽度和高度值时，您可以按如下方式对其进行初始化：

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);
});
无需刷新

使用您的工作示例，我成功地重现了错误。您可以在这里查看：很容易修复，映射必须在正确的页面上初始化，在您的情况下，因为映射是index2页面的一部分，所以它必须在index2 pageinit事件期间初始化。这是您的代码和我的代码之间的唯一区别。或者还有一个解决方案，我也会将其添加到我的答案中。请注意，在我的本地计算机上，我有两个独立的文件：
index.html
文件，其中包含指向加载地图的
map.html
文件的链接。我已将所有代码（
initMap（）
）从
map.js
移动到
map.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>

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

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);
});