javascript - Google Maps API v3 + Foundation 4 Reveal 模式无法正确显示

Question

在我们开始之前，我只想澄清一下，我已经从头到尾阅读了以下 SO 文章，尝试复制该解决方案，但到目前为止还不能。

Google Map API in Foundation reveal modal not displaying properly

Google Map API inside a Reveal Modal not showing fully

How to use google.maps.event.trigger(map, 'resize')

以及此处的 Zurb 基金会问题列表 -> https://github.com/zurb/foundation/issues

我的问题似乎是相同的，我什至在 http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html 检查了他的源代码看起来他已经修好了，但我的修不好。

不确定是否是 Foundation 3 和 4 中的差异导致了我的问题(因为这些 SO 帖子已经发布了将近一年)，但无论如何，调整大小方法似乎不起作用。

这是我在 db 上的基本页面的链接 -> http://db.tt/gdl3wVox

正如您所看到的，小 map 工作正常，但是当您单击“查看更大 map ”的链接时，会出现两个问题。

1. 主要问题 - 只有 1/3 的 map 正在渲染。在 Chrome 或 IE 中检查元素或打开开发工具 (F12) 会导致 map 重新渲染并适合 div 的整个宽度。
2. 小问题 - 显示的 map 不像较小的 map 那样以标记为中心。

除了在此页面上添加两个元素之外，foundation.css 尚未进行自定义。所以你不必去挖掘他们的风格，这里是:

#mini-map  {
  min-width: auto;
  max-width: 100%;
  width: 220px;
  min-height: auto;
  max-height: 100%;
  height: 154px; }

#big-map  {
  min-width: auto;
  max-width: 100%;
  width: 600px;
  min-height: auto;
  max-height: 100%;
  height: 300px; }

我已经实现了google.maps.event.trigger(map, 'resize');按照其他帖子中的描述进行修复(将 map 替换为 bigmap，因为我有两张 map )

         <script>
            var ourLocation = new google.maps.LatLng(46.213769, -60.266018);

            function initialize() {
                var mapOptions = {
                    center: ourLocation,
                    zoom: 14,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                minimap = new google.maps.Map(document.getElementById("mini-map"), mapOptions);
                bigmap = new google.maps.Map(document.getElementById("big-map"), mapOptions);

                minimarker = new google.maps.Marker({
                    map: minimap,
                    draggable: false,
                    animation: google.maps.Animation.DROP,
                    position: ourLocation
                });
                bigmarker = new google.maps.Marker({
                    map: bigmap,
                    draggable: false,
                    animation: google.maps.Animation.DROP,
                    position: ourLocation
                });
            }
            initialize();
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#myModal1').click(function () {
                $('#myModal').reveal();
                    google.maps.event.trigger(bigmap, 'resize');
                });
            });
        </script>

但是这个脚本:

        <script type="text/javascript">
            $(document).ready(function () {
                $('#myModal1').click(function () {
                $('#myModal').reveal(); /* Problem is here */
                    google.maps.event.trigger(bigmap, 'resize');
                });
            });
        </script>

似乎给我带来了错误。当我在 Chrome 的开发工具中查看控制台时，我看到了以下内容:

Uncaught TypeError: Object #<Object> has no method 'reveal' map.html:96

向下钻取时会显示另外两个错误:

(anonymous function) map.html:96

handler.proxy zepto.js:933

自从我在上述主题中复制了修复程序后，我不确定为什么它不起作用。我对重新审视“已解决”的问题感到内疚，但我已经对此进行了几个小时的修补，似乎无法像以前的帖子那样让它发挥作用。

如有任何澄清，我们将不胜感激，提前谢谢您!

Answer 1

你应该使用

$('#myModal').foundation('reveal', 'open');

显示模式。

此外，google.maps.event.trigger(bigmap, 'resize'); 应绑定(bind)到 #myModal 的打开事件:

$('#myModal').on('打开', function () { google.maps.event.trigger(bigmap, '调整大小'); });

并检查bigmap，它超出了变量范围。