除非刷新，否则谷歌地图无法正确显示 [英] google maps not displayed correctly unless refreshing

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

问题描述

我将 JQuery 移动版与 Google Map API 结合使用.除非我刷新页面，否则地图无法正确显示，但我不明白为什么.

这是我的 map.html 文件:

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

和我的 map.js 文件:

function initMap() {严格使用"；google.maps.visualRefresh = true;var 标记，地图，myLocation = {lat:50, lon:-80},地图选项 = {变焦:5，中心:新的 google.maps.LatLng(myLocation.lat, myLocation.lon)，mapTypeId: google.maps.MapTypeId.PLAN,disableDefaultUI: 真};$('#canvas-map').css("height", "200px").css("padding", "0px");map = new google.maps.Map(document.getElementById('canvas-map'), mapOptions);/** 我的位置 **/标记 = 新的 google.maps.Marker({地图:地图，可拖动:假，动画:google.maps.Animation.DROP，位置:新 google.maps.LatLng(myLocation.lat, myLocation.lon),});}

如果我从另一个页面导航到上面的页面，我会得到以下结果:

然后当我刷新时，我得到了预期的结果:

显然不是画布的问题，因为它是显示的(红色).另外，如果我通过地图导航，我可以看到显示在正确位置的标记.这些屏幕截图是使用谷歌浏览器制作的，我用 Firefox 尝试过，这里的画布完全是红色的，根本没有地图.

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

有关详细信息，请参阅 Gajotres 的回答，但基本上，在访问 map.html 页面的链接中，添加 target="_blank" 解决了该问题.请注意， target="_self" 似乎也可以工作，很奇怪，因为它应该是默认值.目标的详细信息此处.

解决方案

google maps v3 框架可以通过 jQuery Mobile 轻松实现.

>

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

你的问题可以用一点 CSS 来解决:

#content {填充:0！重要；位置:绝对！重要；顶部:40px！重要；正确:0 ！重要；左:0！重要；高度:200px！重要；}

基本上，您是在强迫您的内容覆盖可用空间.

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

最终解决方案:

index.html

<头><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><身体><div data-role="page" class="page"><div data-role="content" id="index-content"><div id="菜单"><a href="map.html" data-role="button" target="_blank">Map</a>

map.html

<头><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><身体><div data-role="page" id="map-page"><div data-role="content" id="content"><div id="canvas-map" style="height:100%"/>

<风格>#内容 {填充:0！重要；位置:绝对！重要；顶部:0 ！重要；正确:0 ！重要；底部:40px！重要；左:0！重要；}</风格><script type="text/javascript">$(document).on('pageshow', '#map-page', function(e, data) {var 标记，地图，我的位置 = {纬度:50，经度:-80},地图选项 = {变焦:5，mapTypeId: google.maps.MapTypeId.PLAN,中心:新的 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);标记 = 新的 google.maps.Marker({地图:地图，位置:新 google.maps.LatLng(myLocation.lat, myLocation.lon),});});

如果你看看这个 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天全站免登陆