2

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

Foundation 中的 Google Map API 显示模态显示不正确

显示模式中的 Google Map API 未完全显示

如何使用 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 帖子已经有将近一年的历史了），但无论如何，resize 方法似乎不起作用。

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

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

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

除了在此页面上添加两个元素外，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因为我有两张地图）

         <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

我不确定为什么它不起作用，因为我在上述主题中复制了修复程序。我为重新审视一个“已解决”的问题而感到内疚，但我已经修改了几个小时，似乎无法像以前的帖子那样让它工作。

任何澄清将不胜感激，在此先感谢您！

4

1 回答 1

3

你应该使用

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

显示模态。

此外，google.maps.event.trigger(bigmap, 'resize');应该绑定到 open 的事件#myModal：

$('#myModal').on('opened', function () { google.maps.event.trigger(bigmap, 'resize'); });

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

于 2013-05-22T14:19:57.427 回答