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

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

问题描述

我正在尝试设置一个 Google 地图，该地图将在单击链接时显示，然后在单击另一个链接时隐藏.一切正常，除了当我从 display:none 显示地图时，它无法正确显示.

我读过关于使用 google.maps.event.trigger(map, 'resize');但我对 Javascript 和 JQuery 不够精通，不知道如何将其添加进来.

这是我一直在使用的代码:

<头><title></title><style type="text/css">#视图地图{位置:相对；宽度:944px；向左飘浮;显示:无；}#隐藏地图{位置:相对；宽度:944px；向左飘浮;显示:块；}#map_canvas {位置:相对；向左飘浮;宽度:944px；高度:300px；}</风格><脚本类型=文本/javascript"src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"><script type="text/javascript">函数初始化(){var latlng = new google.maps.LatLng(-27.999673,153.42855);var myOptions = {变焦:15，中心:latlng，mapTypeId: google.maps.MapTypeId.ROADMAP,地图类型控制:真，地图类型控制选项:{样式:google.maps.MapTypeControlStyle.DROPDOWN_MENU}};var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);var contentString = '等等';var infowindow = new google.maps.InfoWindow({内容:内容字符串});var 标记 = 新的 google.maps.Marker({位置:latlng，地图:地图});google.maps.event.addListener(marker, 'click', function() {infowindow.open(地图，标记)；});}google.maps.event.addDomListener(window, 'load', initialize);<script type="text/javascript">功能切换Div1(视图地图){if(document.getElementById(viewmap).style.display == 'block'){document.getElementById(viewmap).style.display = 'none';}别的{document.getElementById(viewmap).style.display = 'block';}}功能 toggleDiv2(隐藏地图){if(document.getElementById(hidemap).style.display == 'none'){document.getElementById(hidemap).style.display = 'block';}别的{document.getElementById(hidemap).style.display = 'none';}}<身体><div id="视图地图"><a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap');">隐藏地图</a><div id="map_canvas"></div>

<div id="隐藏地图"><a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap');">查看地图</a>

任何帮助将不胜感激，

昆汀

解决方案

jquery tabs 也会出现这个问题，你可以尝试用这种方式隐藏地图，而不是应用display:none":

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

位置:绝对；左:-100%；

您还可以添加过渡效果，例如:过渡:左 1s 缓动；

您可以在显示地图后尝试使用 google 事件侦听器触发它:

<script type="text/javascript">功能切换Div1(视图地图){if(document.getElementById(viewmap).style.display == 'block'){document.getElementById(viewmap).style.display = 'none';}别的{document.getElementById(viewmap).style.display = 'block';//这里是你的地图再次显示的地方，试试这里//触发调整大小事件.google.maps.event.trigger(map, 'resize');map.setCenter(latlng);}}功能 toggleDiv2(隐藏地图){if(document.getElementById(hidemap).style.display == 'none'){document.getElementById(hidemap).style.display = 'block';}别的{document.getElementById(hidemap).style.display = 'none';}}

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>

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

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