jQuery SlideToggle 谷歌地图问题

Posted 2023-02-25

【中文标题】jQuery SlideToggle 谷歌地图问题

【英文标题】：jQuery SlideToggle Google Maps Issue

【发布时间】：2012-12-05 22:16:16

【问题描述】：

我已经阅读了其他类似的主题，但没有任何问题/响应有助于使其简单到足以理解我需要做什么。我使用的是 jQuery 1.7 版，这可能解释了为什么其他问题中发布的一些代码是不同的。

Google 地图加载到一个滑动切换的 div 中，其中心点向西北偏移，并且相对于 div 打开时显示的地图部分不可见。我正在尝试制作一个非常简单的地图来显示，没什么特别的。

jQuery(".toggle").click(function () 
    // check the visibility of the next element in the DOM
        jQuery(this).next().slideToggle(); // slide it down
);

我的 jQuery 知识有限，但我知道我需要在切换 div 后强制加载 iframe。我只是不知道如何实现这一点！ html / php 代码如下。

<span class="toggle">
View Map // with some CSS
</span>

<div id="maps" class="ui-helper-hidden">
<iframe   frameborder="0" scrolling="no" margin margin src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=<?php echo $latitude;?>,<?php echo $longitude;?>&amp;aq=&amp;t=m&amp;z=13&amp;output=embed&key=123456789"></iframe>
</div>

【问题讨论】：

我认为它会立即加载......所以你所要做的就是隐藏/显示 div

@wirey 它加载但标记向北和西偏移，而不是居中

【参考方案1】：

您可能需要考虑使用 javascript 和 Maps API 动态加载地图。在此过程中，您将创建一个中心点对象，然后可以在切换回调函数中重用该对象来重置地图的中心。这样的事情应该可以工作。

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">

    $(function () 

        // create a center
        var c = new google.maps.LatLng(-33.8790, 151.2064);

        //create map options object
        var mapOptions = 
            zoom: 14,
            center: c,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        ;

        var map = new google.maps.Map(document.getElementById('maps'), mapOptions);

        $(".toggle").click(function () 
            // check the visibility of the next element in the DOM
            $(this).next().slideToggle(300, function()
                google.maps.event.trigger(map, "resize"); // resize map
                map.setCenter(c); // set the center
            ); // slide it down

        );

    );

</script>

【讨论】：

感谢 James，但我目前仍在为此苦苦挣扎 - 所有的滑动切换 div 都在工作，但具有“地图”ID 的 div 除外

只是地图 div 没有展开/向下滑动。我现在有代码：

我确信您使用 JavaScript 动态添加地图的任何 都必须以固​​定的 css 尺寸开始。所以地图 div 的 CSS 应该是这样的：#maps height:350px;width:425px;显示：无；

非常感谢它现在正在工作。非常感谢。请问，如果我想在#maps div的子div中加载地图，你会如何调整jQuery，子div的ID =“googlemaps”？我想使用#maps div 来加载滑块，但地图要出现在子 div 中。问题的额外部分，但对于像我这样的 jQuery 菜鸟来说，将信息放在一个地方真的很有用:-)

我认为您不必对 jQuery 进行太多更改，只需更改 css 和 html 布局即可。添加一个 ID 为“googlemaps”的子 div。使用 css - #maps display:none; , #googlemaps 高度：350 像素；宽度：425 像素； ，然后更改 JavaScript 以在新的 div 中加载地图 - document.getElementById('googlemaps')。看看这是否有效，然后玩一玩，这是学习的最佳方式:)