Question

在开始之前我只想说清楚我已经从上到下阅读了以下SO文章，试图复制解决方案，到目前为止还不能。

此处与Zurb的基金会问题清单一样 - ＆gt; https://github.com/zurb/foundation/issues

我的问题似乎是相同的，我甚至在http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html检查了他的源代码，看起来他得到了修复，但我无法修复它。

不确定基金会3和4是否会导致我的问题（因为那些SO帖子差不多一年了），但无论如何看起来似乎没有调整大小的方法。

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

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

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

除了在此页面上添加两个元素之外，基础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

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

非常感谢任何澄清，谢谢你提前！

Answer 1

你应该使用

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

显示模态。

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

的已打开事件

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

并检查bigmap，它不在变量范围内。

Google Maps API v3 + Foundation 4显示模式无法正常显示

1 个答案: