Google地图显示：无问题 [英] Google Maps Display:None Problem

查看：82
本文介绍了Google地图显示：无问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我尝试设置一个Google地图，当点击链接时会显示，然后在单击另一个链接时隐藏。一切工作正常，除了当我显示地图从显示：无，它不能正常显示。



我读了关于使用google.maps.event.trigger（地图，'调整大小'）;但我并不熟悉JavaScript和JQuery知道如何添加它。



以下是我一直使用的代码：

 <！DOCTYPE HTML PUBLIC -  // W3C // DTD HTML 4.01 TRANSITIONAL // EN> 
< html> 
< head> 
< title>< / title> 
< style type =text / css> 
 #viewmap {
 position：relative; 
 width：944px; 
 float：left; 
 display：none; 
} 
 #hidemap {
 position：relative; 
 width：944px; 
 float：left; 
 display：block; 
} 
 #map_canvas {
 position：relative; 
 float：left; 
 width：944px; 
 height：300px; 
} 
< / style> 
< script type =text / javascript
 src =http://maps.google.com/maps/api/js?v=3.2&sensor=false> 
< / script> 
< script type =text / javascript> 
函数initialize（）{
 var latlng = new google.maps.LatLng（-27.999673,153.42855）; 
 var myOptions = {
 zoom：15，
 center：latlng，
 mapTypeId：google.maps.MapTypeId.ROADMAP，
 mapTypeControl：true，
 mapTypeControlOptions：{
 style：google.maps.MapTypeControlStyle.DROPDOWN_MENU 
} 
}; 
 
 var map = new google.maps.Map（document.getElementById（map_canvas），myOptions）; 
 
 var contentString ='blah'; 
 
 var infowindow = new google.maps.InfoWindow（{
 content：contentString 
}）; 
 
 var marker = new google.maps.Marker（{
 position：latlng，
 map：map 
}）; 
 
 google.maps.event.addListener（marker，'click'，function（）{
 infowindow.open（map，marker）; 
}）; 
} 
 
 google.maps.event.addDomListener（window，'load'，initialize）; 
< / script> 
< script type =text / javascript> 
 function toggleDiv1（viewmap）{
 if（document.getElementById（viewmap）.style.display =='block'）{
 document.getElementById（viewmap）.style.display ='none ; 
} else {
 document.getElementById（viewmap）.style.display ='block'; 
} 
 
 function toggleDiv2（hidemap）{
 if（document.getElementById（hidemap）.style.display =='none'）{
 document.getElementById （hidemap）.style.display ='block'; 
} else {
 document.getElementById（hidemap）.style.display ='none'; 
} 
} 
< / script> 
< / head> 
< body> 
< div id =viewmap> 
< a href =＃onmousedown =toggleDiv1（'viewmap'）; toggleDiv2（'hidemap'）;>隐藏地图< / a> 
< div id =map_canvas>< / div> 
< / div> 
< div id =hidemap> 
< a href =＃onmousedown =toggleDiv1（'viewmap'）; toggleDiv2（'hidemap'）;>查看地图< / a> 
< / div> 
< / body> 
< / html>

任何帮助都不胜感激，

Quintin

解决方案

这个问题也发生在jquery选项卡上，而不是应用display：none，你可以尝试隐藏以这种方式映射：



在试图隐藏地图时添加以下样式，而不是使用display：none 

  position：absolute;剩余
：-100％;

您还可以添加如下转换：transition：left 1s ease;

您可以尝试在显示地图后触发Google事件侦听器： 

 <脚本类型= 文本/ JavaScript的 > 
 var map; //我在这里放置了地图变量，以便其他功能可以看到它。 
 var latlng = new google.maps.LatLng（-27.999673,153.42855）; 
 //以再次居中地图... 
函数initialize（）{
 
 var myOptions = {
 zoom：15，
 center ：latlng，
 mapTypeId：google.maps.MapTypeId.ROADMAP，
 mapTypeControl：true，
 mapTypeControlOptions：{
 style：google.maps.MapTypeControlStyle.DROPDOWN_MENU 
} 
}; 
 
 map = new google.maps.Map（document.getElementById（map_canvas），myOptions）; 
 
 var contentString ='blah'; 
 
 var infowindow = new google.maps.InfoWindow（{
 content：contentString 
}）; 
 
 var marker = new google.maps.Marker（{
 position：latlng，
 map：map 
}）; 
 
 google.maps.event.addListener（marker，'click'，function（）{
 infowindow.open（map，marker）; 
}）; 
} 
 
 google.maps.event.addDomListener（window，'load'，initialize）; 
< / script> 
< script type =text / javascript> 
 function toggleDiv1（viewmap）{
 if（document.getElementById（viewmap）.style.display =='block'）{
 document.getElementById（viewmap）.style.display ='none ; 
} else {
 document.getElementById（viewmap）.style.display ='block'; 
 //这里是你的地图再次显示的地方，试试这里
 //触发resize事件。 
 google.maps.event.trigger（地图，'resize'）; 
 map.setCenter（latlng）; 
} 
 
 function toggleDiv2（hidemap）{
 if（document.getElementById（hidemap）.style.display =='none'）{
 document.getElementById （hidemap）.style.display ='block'; 
} else {
 document.getElementById（hidemap）.style.display ='none'; 
} 
} 
< / script>


I'm trying to set up a Google map that will display when a link is clicked and then hide when another link is clicked. Everything works fine, except when I show the map from display:none, it doesn't display properly.

I read about using google.maps.event.trigger(map, 'resize'); but I'm not proficient enough with Javascript and JQuery to know how to add it in.

Here's the code I've been using:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
    <head>
        <title></title>
        <style type="text/css">
            #viewmap {
                position:relative;
                width:944px;
                float:left;
                display:none;
            }
            #hidemap {
                position:relative;
                width:944px;
                float:left;
                display:block;
            }
            #map_canvas {
                position:relative;
                float:left;
                width:944px;
                height:300px;
            }
        </style>
        <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?v=3.2&sensor=false">
        </script>
        <script type="text/javascript">
            function initialize() {
                var latlng = new google.maps.LatLng(-27.999673,153.42855);
                var myOptions = {
                    zoom: 15,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    mapTypeControl: true,
                    mapTypeControlOptions: {
                        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
                    }
                };

                var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

                var contentString = 'blah';

                var infowindow = new google.maps.InfoWindow({
                    content: contentString
                });

                var marker = new google.maps.Marker({
                    position: latlng, 
                    map: map
                });

                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map,marker);
                });
            }

            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
        <script type="text/javascript">
            function toggleDiv1(viewmap){
                if(document.getElementById(viewmap).style.display == 'block'){
                    document.getElementById(viewmap).style.display = 'none';
                }else{
                    document.getElementById(viewmap).style.display = 'block';
                }
            }
            function toggleDiv2(hidemap){
                if(document.getElementById(hidemap).style.display == 'none'){
                    document.getElementById(hidemap).style.display = 'block';
                }else{
                    document.getElementById(hidemap).style.display = 'none';
                }
            }
        </script>
    </head>
    <body>
        <div id="viewmap">
            <a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap');">Hide map</a>
            <div id="map_canvas"></div>
        </div>
        <div id="hidemap">
            <a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap');">View map</a>
        </div>
    </body>
</html>

Any help would be much appreciated,

Quintin

解决方案

This problems also happens with the jquery tabs, instead of applying "display:none", you can try hidding the map in this way:

Add the following styles when you are trying to hide the map, instead of using display:none

position: absolute;
left: -100%;

You can also add transitions like: transition: left 1s ease;

You can try with google event listener triggering it after you display the map:

<script type="text/javascript">
    var map; //I placed here the map variable so other functions can see it.
    var latlng = new google.maps.LatLng(-27.999673,153.42855); 
    // in order to center again the map...
    function initialize() {

        var myOptions = {
            zoom: 15,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
            }
        };

        map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

        var contentString = 'blah';

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        var marker = new google.maps.Marker({
            position: latlng, 
            map: map
        });

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map,marker);
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script type="text/javascript">
    function toggleDiv1(viewmap){
        if(document.getElementById(viewmap).style.display == 'block'){
            document.getElementById(viewmap).style.display = 'none';
        }else{
            document.getElementById(viewmap).style.display = 'block';
            //here is where your map is being displayed again, try here
            // to trigger the resize event.
            google.maps.event.trigger(map, 'resize');
            map.setCenter(latlng);
        }
    }
    function toggleDiv2(hidemap){
        if(document.getElementById(hidemap).style.display == 'none'){
            document.getElementById(hidemap).style.display = 'block';
        }else{
            document.getElementById(hidemap).style.display = 'none';
        }
    }
</script>

这篇关于Google地图显示：无问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

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