Html 在移动设备上以黑屏的形式集成谷歌地图

我正在开发一个网络应用程序。在这篇文章中，我将谷歌地图整合到一个模式中，使我的网站在移动设备上更具响应性

这就是我调用modal在移动设备上显示完整谷歌地图的方式

<div>
 <a href="javascript:void(0);" class="responsive_view_map" data-toggle="modal" data-target="#mapModal">view full map</a>
</div>

模态是

<div class="map_modl">
        <!-- Modal -->
        <div class="modal fade" id="mapModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">

                    <div class="modal-body">

                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3672.311578469024!2d72.50343029999999!3d23.012329299999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14070cd0634f161b%3A0xaef22a675f6f2417!2sMondeal+Square!5e0!3m2!1sen!2sin!4v1437386756580" frameborder="0" style="border:0" allowfullscreen="true"></iframe>
                    </div>

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

通过点击“查看完整地图”，我得到了黑屏

重现此场景的步骤：

单击此链接

切换到移动模式并刷新页面

点击“查看完整地图”链接。黑屏会出现

---

有几个错误

地图包装器div不可见，位置错误

另外，您的JS脚本为“map_modl”-DIV添加了“display:none；”。 所以你的地图永远不可见

添加此CSS以查看地图：）

---

我调试了代码，发现我导入了不同版本的引导 这个脚本多次调用，下面的类多次嵌入

<div class="modal-backdrop fade in"></div>

这成为在给定贴图上创建多个黑色不透明度层的原因。 这就是地图不可见的原因

---

删除了多个导入，它对我有用。

我介绍您给定的CSS。在这个“查看完整地图”变得不可点击之后，我也尝试了删除“显示：无”，但它对我也不起作用。

<div class="modal-backdrop fade in"></div>