Google地图内容不会在Bootstrap模式视图中显示 [英] Google map content not showing inside Bootstrap modal view

查看：133
本文介绍了Google地图内容不会在Bootstrap模式视图中显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

。
$ b

谢谢 

 <！DOCTYPE html> 
< html> 
< head> 
< style> 
 / * Modal（背景）* / 
 .modal {
 display：none; / *默认隐藏* / 
 position：fixed; / *保持原状* / 
 z-index：1; / *坐在上面* / 
 padding-top：100px; / *箱子的位置* / 
剩下：0; 
 top：0; 
宽度：100％; / *全宽* / 
高度：100％; / *全高* / 
溢出：自动; / *如果需要可以滚动* / 
 background-color：rgb（0,0,0）; / *备用颜色* / 
 background-color：rgba（0,0,0,0.4）; / *黑色不透明* / 
} 
 
 / *模态内容* / 
。模态内容{
位置：相对; 
背景颜色：#fefefe; 
 margin：auto; 
 padding：0; 
 border：1px solid＃888; 
宽度：80％; 
 box-shadow：0 4px 8px 0 rgba（0,0,0,0.2），0 6px 20px 0 rgba（0,0,0,0.19）; 
 -webkit-animation-name：animatetop; 
 -webkit-animation-duration：0.4s; 
 animation-name：animatetop; 
动画持续时间：0.4s 
} 
 
 / *添加动画* / 
 @ -webkit-keyframes animatetop {
 from {top：-300px ;不透明度：0} 
到{top：0;不透明度：1} 
} 
 
 @keyframes animatetop {
 from {top：-300px;不透明度：0} 
到{top：0;不透明度：1} 
} 
 
 / *关闭按钮* / 
 .close {
颜色：白色; 
 float：right; 
 font-size：28px; 
 font-weight：bold; 
} 
 
 .close：hover，
 .close：focus {
 color：＃000; 
 text-decoration：none; 
光标：指针; 
} 
 
 .modal-header {
 padding：2px 16px; 
背景颜色：＃5cb85c; 
颜色：白色; 
} 
 
 .modal-body {padding：2px 16px;} 
 
 .modal-footer {
 padding：2px 16px; 
背景颜色：＃5cb85c; 
颜色：白色; 
} 
< / style> 
< / head> 
< body> 
 
< h2>带页眉和页脚的动画模板< / h2> 
 
<！ - 触发器/打开模式 - > 
< button id =myBtn>打开模式< / button> 
 
 <！ -  The Modal  - > 
< div id =myModalclass =modal> 
 
 <！ - 模态内容 - > 
< div class =modal-content> 
< div class =modal-header> 
< span class =close>& times;< / span> 
< h2>模态标头< / h2> 
< / div> 
< div class =modal-body> 
 
< script src =http://maps.google.com/maps/api/js?sensor=false&key=AIzaSyAlb3bRgk_Jq3mBzgpVyLTeeKL-RKaSkx4&callback=initMaptype =text / javascript >< /脚本> 
 
 
< style> 
 
 .map {width：430px; height：150px;} 
< / style> 
 
< div id =map1class =map>< / div> 
< script type =text / javascript> 
 var address =california，USA; 
 var myLatlng = new google.maps.LatLng（95.1，16.0）; 
 var map1 = new google.maps.Map（document.getElementById（map1），{mapTypeId：google.maps.MapTypeId.ROADMAP，zoom：12，center：myLatlng}）; 
 var geocoder = new google.maps.Geocoder（）; 
 geocoder.geocode（{address：address}，function（results，status）{if（status == google.maps.GeocoderStatus.OK）{
 var marker = new google.maps.Marker （{position：results [0] .geometry.location，map：map1}）; 
 map1.setCenter（results [0] .geometry.location）;}}）; 
< / script> 
 
< / div> 
< div class =modal-footer> 
< h3>模态页脚< / h3> 
< / div> 
< / div> 
 
< / div> 
 
< script> 
 //获取模态
 var modal = document.getElementById（'myModal'）; 
 
 //获取打开模式
的按钮var btn = document.getElementById（myBtn）; 
 
 //获取< span>元素，关闭模式
 var span = document.getElementsByClassName（close）[0]; 
 
 //当用户点击按钮时，打开模式
 btn.onclick = function（）{
 modal.style.display =block; 
} 
 
 //当用户点击< span> （x），关闭模态
 span.onclick = function（）{
 modal.style.display =none; 
} 
 
 //当用户点击模式外的任何地方时，关闭它
 window.onclick = function（event）{
 if（event.target = = modal）{
 modal.style.display =none; 
} 
} 
< / script> 
 
< / body> 
< / html>


解决方案

我已经修复了一些问题代码如下。请注意评论中的更改文字。基本问题如下：


  1. 制作一个div，它是地图div的父级，并控制该div的可见性，而不是地图DIV。通过最初使地图的div不可见，我相信它会搞乱地图。控制其父级的可见性，并且不会出现此问题。 将地图创建卷成函数调用，并且只有在您第一次要求显示模态。用布尔全局控制这个。

以下是更正后的代码。测试和工作： 

 <！DOCTYPE html> 
< html> 
 
< head> 
< style> 
 / * CHANGE 1：为模式创建一个隐藏父项* / 
 
 #parent {
 display：none; 
} 
 / * Modal（背景） -  CHANGE 2，删除显示none * / 
 
 .modal {
 position：fixed; 
 / *保持原状* / 
 z-index：1; 
 / *坐在上面* / 
 padding-top：100px; 
 / *箱子的位置* / 
剩下：0; 
 top：0; 
宽度：100％; 
 / *全宽* / 
高度：100％; 
 / *全高* / 
溢出：自动; 
 / *如果需要，启用滚动* / 
 background-color：rgb（0，0，0）; 
 / *回退颜色* / 
 background-color：rgba（0，0，0，0.4）; 
 / *黑色不透明* / 
} 
 / *模态内容* / 
 
。模式内容{
位置：相对; 
背景颜色：#fefefe; 
 margin：auto; 
 padding：0; 
 border：1px solid＃888; 
宽度：80％; 
 box-shadow：0 4px 8px 0 rgba（0，0，0，0.2），0 6px 20px 0 rgba（0，0，0，0.19）; 
 -webkit-animation-name：animatetop; 
 -webkit-animation-duration：0.4s; 
 animation-name：animatetop; 
动画持续时间：0.4s 
} 
 / *添加动画* / 
 
 @ -webkit-keyframes animatetop {
 from {
顶部：-300px; 
 opacity：0 
} 
到{
 top：0; 
 opacity：1 
} 
} 
 
 @keyframes animatetop {
 from {
 top：-300px; 
 opacity：0 
} 
到{
 top：0; 
 opacity：1 
} 
} 
 / *关闭按钮* / 
 
 .close {
颜色：白色; 
 float：right; 
 font-size：28px; 
 font-weight：bold; 
} 
 
 .close：hover，
 .close：focus {
 color：＃000; 
 text-decoration：none; 
光标：指针; 
} 
 
 .modal-header {
 padding：2px 16px; 
背景颜色：＃5cb85c; 
颜色：白色; 
} 
 
 .modal-body {
 padding：2px 16px; 
} 
 
 .modal-footer {
 padding：2px 16px; 
背景颜色：＃5cb85c; 
颜色：白色; 
} 
< / style> 
< / head> 
 
< body> 
 
< h2>带页眉和页脚的动画模板< / h2> 
 
<！ - 触发器/打开模式 - > 
< button id =myBtn>打开模式< / button> 
 <！ -  CHANGE 3：父div  - > 
< div id =parent> 
 
 <！ -  The Modal  - > 
< div id =myModalclass =modal> 
 
 <！ - 模态内容 - > 
< div class =modal-content> 
< div class =modal-header> 
< span class =close>& times;< / span> 
< h2>模态标头< / h2> 
< / div> 
< div class =modal-body> 
< script> 
 / * CHANGE 4：一个nit，你需要一个定义的回调* / 
函数initMap（）{
 
}; 
 $ b $ * CHANGE 5：一个函数，当您想要显示地图时创建地图* / 
函数doMap（）{
 var address =california，USA; 
 var myLatlng = new google.maps.LatLng（30.2719771，-97.7475389）; 
变种MAP1 =新google.maps.Map（的document.getElementById（ MAP1），{
的mapTypeId：google.maps.MapTypeId.ROADMAP，
变焦：12，
中心：myLatlng 
}）; 
 var geocoder = new google.maps.Geocoder（）; 
 geocoder.geocode（{
address：address 
}，function（results，status）{
 if（status == google.maps.GeocoderStatus.OK）{
 var marker = new google.maps.Marker（{
 position：results [0] .geometry.location，
 map：map1 
}）; 
 map1.setCenter （results [0] .geometry.location）; 
} 
}）; 
} 
 
 // CHANGE 6：新的var来控制父母
 var parent = document.getElementById（'parent'）; 
 var modal = document.getElementById（'myModal'）; 
 
 //获取打开模式
的按钮var btn = document.getElementById（myBtn）; 
 
 //获取< span>元素，关闭模式
 var span = document.getElementsByClassName（close）[0]; 
 
 //改变7：只做一次
 var bFirstShow = true; 
 
 //当用户点击按钮时，打开模式
 btn.onclick = function（）{
 parent.style.display =block; （bFirstShow == true）{
 doMap（）; 
 // New：当你想显示地图时初始化地图
 if 
 bFirstShow = false; 
} 
} 
 
 //当用户点击< span> （x），关闭模态
 span.onclick = function（）{
 parent.style.display =none; 
} 
 
 //当用户点击模式外的任何地方时，关闭它
 window.onclick = function（event）{
 if（event.target = = modal）{
 parent.style.display =none; 
} 
} 
< / script> 
将SCRIPT SRC = http://maps.google.com/maps/api/js?sensor=false&key=AIzaSyAlb3bRgk_Jq3mBzgpVyLTeeKL-RKaSkx4&callback=initMap 类型= 文本/ JavaScript的 >< ; /脚本> 
 
 
< style> 
 .map {
 width：430px; 
 height：150px; 
} 
< / style> 
 
< div id =map1class =map>< / div> 
< / div> 
< div class =modal-footer> 
< h3>模态页脚< / h3> 
< / div> 
< / div> 
 
< / div> 
< / div> 
< / body> 
 
< / html>

希望这有助于您！ ：）

Dave


Hello great Stackoverflow coders, the code below displays a google map when run from a page but when I embeds it into bootstrap modal , it only shows the shape of the map and no location is displayed. you can see the attached image. please can someone help me with that.

Thanks

<!DOCTYPE html>
<html>
<head>
<style>
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}
</style>
</head>
<body>

<h2>Animated Modal with Header and Footer</h2>

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">

<script src="http://maps.google.com/maps/api/js?sensor=false&key=AIzaSyAlb3bRgk_Jq3mBzgpVyLTeeKL-RKaSkx4&callback=initMap" type="text/javascript"></script>


<style>

.map{width: 430px; height: 150px;}
</style>

<div id="map1" class="map"></div>
<script type="text/javascript"> 
var address = "california,USA";
var myLatlng = new google.maps.LatLng(95.1, 16.0);
var map1 = new google.maps.Map(document.getElementById("map1"), {mapTypeId: google.maps.MapTypeId.ROADMAP,zoom: 12,center: myLatlng});
var geocoder = new google.maps.Geocoder();
geocoder.geocode({"address": address},function(results, status) {if(status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({position: results[0].geometry.location,map: map1});
map1.setCenter(results[0].geometry.location);}});
</script>

    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

</body>
</html>

解决方案

There are a few issues I've fixed in the code below. Note the "CHANGE" text in the comments. The basic problems are as follows:

  1. Make a div that's a parent of the map div and control the visibility of that div, not the map div. By making the map's div invisible initially, I believe it's messing up the map. Control the visibility of its parent, and you won't have this problem.
  2. Rolled up the map creation into a function call, and only do this the first time you ask to show the modal. Controlled this with a boolean global.

Here's the corrected code. Tested and working: 

<!DOCTYPE html>
<html>

<head>
    <style>
        /* CHANGE 1: create a hidden parent to the modal */

        #parent {
            display: none;
        }
        /* The Modal (background) - CHANGE 2, removed display none */

        .modal {
            position: fixed;
            /* Stay in place */
            z-index: 1;
            /* Sit on top */
            padding-top: 100px;
            /* Location of the box */
            left: 0;
            top: 0;
            width: 100%;
            /* Full width */
            height: 100%;
            /* Full height */
            overflow: auto;
            /* Enable scroll if needed */
            background-color: rgb(0, 0, 0);
            /* Fallback color */
            background-color: rgba(0, 0, 0, 0.4);
            /* Black w/ opacity */
        }
        /* Modal Content */

        .modal-content {
            position: relative;
            background-color: #fefefe;
            margin: auto;
            padding: 0;
            border: 1px solid #888;
            width: 80%;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            -webkit-animation-name: animatetop;
            -webkit-animation-duration: 0.4s;
            animation-name: animatetop;
            animation-duration: 0.4s
        }
        /* Add Animation */

        @-webkit-keyframes animatetop {
            from {
                top: -300px;
                opacity: 0
            }
            to {
                top: 0;
                opacity: 1
            }
        }

        @keyframes animatetop {
            from {
                top: -300px;
                opacity: 0
            }
            to {
                top: 0;
                opacity: 1
            }
        }
        /* The Close Button */

        .close {
            color: white;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }

        .modal-header {
            padding: 2px 16px;
            background-color: #5cb85c;
            color: white;
        }

        .modal-body {
            padding: 2px 16px;
        }

        .modal-footer {
            padding: 2px 16px;
            background-color: #5cb85c;
            color: white;
        }
    </style>
</head>

<body>

    <h2>Animated Modal with Header and Footer</h2>

    <!-- Trigger/Open The Modal -->
    <button id="myBtn">Open Modal</button>
    <!-- CHANGE 3: the parent div -->
    <div id="parent">

        <!-- The Modal -->
        <div id="myModal" class="modal">

            <!-- Modal content -->
            <div class="modal-content">
                <div class="modal-header">
                    <span class="close">&times;</span>
                    <h2>Modal Header</h2>
                </div>
                <div class="modal-body">
                    <script>
                        /* CHANGE 4: a nit, you need a callback defined */
                        function initMap() {

                        };

                        /* CHANGE 5: a function to call to create the map when you want it shown */
                        function doMap() {
                            var address = "california,USA";
                            var myLatlng = new google.maps.LatLng(30.2719771, -97.7475389);
                            var map1 = new google.maps.Map(document.getElementById("map1"), {
                                mapTypeId: google.maps.MapTypeId.ROADMAP,
                                zoom: 12,
                                center: myLatlng
                            });
                            var geocoder = new google.maps.Geocoder();
                            geocoder.geocode({
                                "address": address
                            }, function(results, status) {
                                if (status == google.maps.GeocoderStatus.OK) {
                                    var marker = new google.maps.Marker({
                                        position: results[0].geometry.location,
                                        map: map1
                                    });
                                    map1.setCenter(results[0].geometry.location);
                                }
                            });
                        }

                        // CHANGE 6: new var to control the parent
                        var parent = document.getElementById('parent');
                        var modal = document.getElementById('myModal');

                        // Get the button that opens the modal
                        var btn = document.getElementById("myBtn");

                        // Get the <span> element that closes the modal
                        var span = document.getElementsByClassName("close")[0];

                        // CHANGE 7: only do this once
                        var bFirstShow = true;

                        // When the user clicks the button, open the modal
                        btn.onclick = function() {
                            parent.style.display = "block";
                            // New: init the map when you want it shown
                            if (bFirstShow == true) {
                                doMap();
                                bFirstShow = false;
                            }
                        }

                        // When the user clicks on <span> (x), close the modal
                        span.onclick = function() {
                            parent.style.display = "none";
                        }

                        // When the user clicks anywhere outside of the modal, close it
                        window.onclick = function(event) {
                            if (event.target == modal) {
                                parent.style.display = "none";
                            }
                        }
                    </script>
                    <script src="http://maps.google.com/maps/api/js?sensor=false&key=AIzaSyAlb3bRgk_Jq3mBzgpVyLTeeKL-RKaSkx4&callback=initMap" type="text/javascript"></script>


                    <style>
                        .map {
                            width: 430px;
                            height: 150px;
                        }
                    </style>

                    <div id="map1" class="map"></div>
                </div>
                <div class="modal-footer">
                    <h3>Modal Footer</h3>
                </div>
            </div>

        </div>
    </div>
</body>

</html>

Hope this helps! :)

Dave

这篇关于Google地图内容不会在Bootstrap模式视图中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

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