jQuery SlideToggle 谷歌地图问题

Question

jQuery SlideToggle 谷歌地图问题

3

我读过其他类似的帖子，但没有一个问题/回答能够简单明了地解释我需要做什么。我正在使用可能解释了其他问题中发布的某些代码不同的jQuery版本1.7。

谷歌地图在slideToggle'd 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 width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" 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>

- whispersan

我认为它已经可以立即加载了，所以你只需要隐藏/显示div即可。 - wirey00

@wirey 它能加载，但标记偏移到了北方和西方，而不是居中显示。 - whispersan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- James Hull · Accepted Answer

您可能需要使用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>