谷歌地图不能正确显示，除非刷新 [英] google maps not displayed correctly unless refreshing

查看：83
本文介绍了谷歌地图不能正确显示，除非刷新的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用的是Google Map API的JQuery mobile。
地图显示不正确，除非我刷新页面，我不明白为什么。



这里是我的map.html文件：

 < div data-role =pageid =map-page> 
< div data-role =contentid =canvas-mapstyle =background-color：red>< / div> 
< script src =js / map.js>< / script> 
< script type =text / javascript> 
 var $ canvasMap = $（'＃canvas-map'）; （''pagebeforeshow'，initMap（））; 
 $（'＃canvas-map'）。 
< / script> 
< / div>

和我的map.js文件：

 函数initMap（）{
use strict; 
 google.maps.visualRefresh = true; 
 
 var marker，map，
 myLocation = {lat：50，lon：-80}，
 mapOptions = {
 zoom：5，
 center ：new google.maps.LatLng（myLocation.lat，myLocation.lon），
 mapTypeId：google.maps.MapTypeId.PLAN，
 disableDefaultUI：true 
}; 
 
 $（'＃canvas-map'）。css（height，200px）。css（padding，0px）; 
 map = new google.maps.Map（document.getElementById（'canvas-map'），mapOptions）; 
 $ b $ ** MyPosition ** / 
 marker = new google.maps.Marker（{
 map：map，
 draggable：false，
动画：google.maps.Animation.DROP，
 position：new google.maps.LatLng（myLocation.lat，myLocation.lon），
}）; 
}

如果我从另一页导航到上述页面，我会得到以下结果：



和那么当我刷新时，我会得到预期的结果：



这显然不是画布的问题，因为它显示（红色）。另外，如果我浏览地图，我可以看到标记显示在正确的位置。
这些截图是使用谷歌浏览器制作的，我用Firefox浏览过，画布完全是红色的，根本没有地图。

PS：这是一个简单的版本的原始代码，但行为是相同的。



编辑：



请参阅Gajotres的回答细节，但基本上，在访问map.html页面的链接中，添加 target =_ blank解决了问题。请注意， target =_ self似乎也适用，很奇怪，因为它应该是默认值。详细信息目标 此处。 框架可以很容易地用jQuery Mobile实现。



让我们来讨论这里的问题。您的内容div有高度和宽度问题，主要是因为只有时间页面尺寸可以在 pageshow 事件期间正确计算。但即使如此，content div也不会覆盖整个页面。



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

  #content {
 padding：0！important; 
位置：绝对！重要; 
 top：40px！important; 
正确：0！重要; 
剩下：0！重要; 
 height：200px！important; 
}

基本上，您正在强制您的内容覆盖可用空间。



工作示例： http://jsfiddle.net/RFNPt/2/

最终解决方案：



index.html 



 <！DOCTYPE html> 
< html> 
< head> 
< meta charset =utf-8/> 
< meta name =viewportcontent =width = device-width，initial-scale = 1/> 
< script src =http://maps.google.com/maps/api/js?sensor=true>< / script> 
< link rel =stylesheethref =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 =pageclass =page> 
< div data-role =contentid =index-content> 
< div id =menu> 
< a href =map.htmldata-role =buttontarget =_ blank> Map< / a> 
< / div> 
< / div> 
< / div> 
< / body> 
< / html>



map.html 



 <！DOCTYPE html> 
< html> 
< head> 
< meta charset =utf-8/> 
< meta name =viewportcontent =width = device-width，initial-scale = 1/> 
< script src =http://maps.google.com/maps/api/js?sensor=true>< / script> 
< link rel =stylesheethref =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 =pageid =map-page> 
< div data-role =contentid =content> 
< div id =canvas-mapstyle =height：100％/> 
< / div> 
< style> 
 #content {
 padding：0！important; 
位置：绝对！重要; 
 top：0！important; 
正确：0！重要; 
 bottom：40px！important; 
剩下：0！重要; 
} 
< / 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>

如果您看一下 ARTICLE ，您会发现更多关于此主题的信息和示例。

I am using JQuery mobile with the Google Map API. The map is not displayed properly unless I refresh the page and I don't understand why.

here is my map.html file:

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

and my map.js file:

function initMap() {
    "use strict";
    google.maps.visualRefresh = true;

    var marker, map, 
        myLocation = {lat:50, lon:-80},
        mapOptions = {
            zoom: 5,
            center: new google.maps.LatLng(myLocation.lat, myLocation.lon),
            mapTypeId: google.maps.MapTypeId.PLAN,
            disableDefaultUI: true
        };

    $('#canvas-map').css("height", "200px").css("padding", "0px");
    map = new google.maps.Map(document.getElementById('canvas-map'), mapOptions);

    /** MyPosition **/
    marker = new google.maps.Marker({
        map: map,
        draggable: false,
        animation: google.maps.Animation.DROP,
        position: new google.maps.LatLng(myLocation.lat, myLocation.lon),
    });
}

If I navigate from another page to the above page, I get the following result:

And then when I refresh, I get the expected result:

It is obviously not a problem with the canvas, since it is displayed (in red). Plus,if I navigate trhough the map, I can see the marker displayed at the right position. These screenshots were made using Google Chrome, I tried with Firefox and the canvas is here completely red, no map at all.

PS: this is a simple version of my original code, but the behavior is the same.

EDIT:

See Gajotres' answer for details, but basically, within the link to access map.html page, adding target="_blank" solved the issue. Note that target="_self" seems to work as well, strange since it is supposed to be the default value. Details on target here.

解决方案

There's a trick how google maps v3 framework can be easily implemented with jQuery Mobile.

Lets talk about the problems here. your content div has a height and width problem, mainly because only time page dimensions can be calculated correctly is during the pageshow event. But even then content div will not cover full page.

Your problem can be solved with a little bit of CSS :

#content {
    padding: 0 !important;
    position : absolute !important; 
    top : 40px !important;  
    right : 0 !important; 
    left : 0 !important;     
    height: 200px !important;
}

Basically you are forcing your content to cover available space.

Working example: http://jsfiddle.net/RFNPt/2/

Final solution :

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

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

If you take a look at this ARTICLE you will find much more information regarding this topic plus examples.

这篇关于谷歌地图不能正确显示，除非刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆