Google Maps API v3 + Foundation 4 Reveal modal 显示不正确

2022-01-17 00:00:00 resize modal-dialog javascript google-maps-api-3 zurb-foundation

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

Before we begin I just want to make clear that I have already read the following SO articles top to bottom, tried to replicate the solution, and so far cannot.

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

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

如何使用google.maps.event.trigger(map,'调整大小')

这里还有 Zurb 的 Foundation 问题列表 -> https://github.com/zurb/foundation/问题

As well as Zurb's Foundation Issue List here - > https://github.com/zurb/foundation/issues

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

My issue seems to be identical, and I even checked his source code at http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html and it looks like he got his fixed, but I cannot get mine fixed.

不确定是不是 Foundation 3 和 4 中的差异导致了我的问题(因为这些 SO 帖子已经有将近一年的历史了)，但无论如何，resize 方法似乎不起作用.

Not sure if it's a difference in Foundation 3 and 4 that's causing my problem (since those SO posts are almost a year old) but in any case it doesn't seem like the resize method is working.

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

Here's a link to my basic page on db -> http://db.tt/gdl3wVox

您可以看到小地图可以正常工作，但是当您单击查看大地图"的链接时，会出现两个问题.

As you can see small map works fine, but when you click link for "View Bigger Map" there's two problems.

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

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

The foundation.css has not been customized other than to add the two elements on this page. So you don't have to go digging for their style, here it is:

#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 因为我有两张地图)

I have implemented the google.maps.event.trigger(map, 'resize'); fix as described in other posts (replacing map with bigmap as I have two maps)

         <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 的开发工具中查看控制台时，我看到了这个:

seems to be causing an error for me. When I view the Console in Chrome's Dev Tool I see this:

未捕获的类型错误:对象#<对象>没有方法 'reveal' map.html:96

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

which when drilled down shows another two error:

(匿名函数)map.html:96

handler.proxy zepto.js:933

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

I'm not sure why it is not working since I replicated the fix in the above topics. I feel guilty for revisiting a "solved" issue but I've tinkered with this for hours now and can't seem to get it working as previous posts have done.

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

Any clarification would be greatly appreciated, thank you in advance!

推荐答案

你应该使用

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

显示模态.

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

Also, google.maps.event.trigger(bigmap, 'resize'); should be bound to the opened event of the #myModal:

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

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

And check bigmap, it's out of the variable scope.

相关文章