javascript - Google map 内容未显示在 Bootstrap 模态视图中

标签 javascript google-maps-api-3 bootstrap-modal

enter image description here你好，伟大的 Stackoverflow 程序员，下面的代码在从页面运行时显示谷歌地图，但当我将其嵌入到 bootstrap modal 中时，它只显示 map 的形状，不显示位置。你可以看到附图。请有人帮助我 就这样。

谢谢

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

最佳答案

我在下面的代码中修复了一些问题。请注意注释中的“更改”文本。基本问题如下:

  1. 创建一个作为 map div 的父级的 div，并控制该 div(而不是 map div)的可见性。通过最初使 map 的 div 不可见，我相信它会弄乱 map 。控制其父级的可见性，就不会出现此问题。
  2. 将 map 创建汇总到函数调用中，并且仅在您第一次要求显示模式时执行此操作。用 bool 全局控制它。

这是更正后的代码。测试并工作:

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

希望这有帮助! :)

戴夫

关于javascript - Google map 内容未显示在 Bootstrap 模态视图中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41917035/

上一篇：Javascript正则表达式提取标题和iframe

下一篇：Javascript - 如何删除nodeName或HTML标签但保留内部标记？

相关文章：

javascript - selectorgadget 是如何工作的？

javascript - 在 iPhone 模拟器上显示谷歌地图 - Phonegap

html - 带有 Bootstrap 的 Google map 没有响应

javascript - 单击打印按钮时获取jsp页面的确切布局

java - JSF Richfaces 前端性能调优

javascript - 使用 JavaScript 解析 URL # 片段

javascript - 通过 javascript 调用时如何将数据传递给 Bootstrap 模式？

javascript - 新帖子更新按钮

javascript - 将 WordPress jQuery 添加到自定义页面模板

javascript - 将 Google map 坐标设置为中心屏幕

©2024 IT工具网  联系我们