jQuery SlideToggle 谷歌地图问题 [英] jQuery SlideToggle Google Maps Issue

问题描述

我已经阅读了其他类似的主题，但没有任何问题/回复可以帮助使其足够简单以了解我需要做什么.我使用的是 jQuery 1.7 版，这可能解释了为什么其他问题中发布的某些代码不同.

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

jQuery(".toggle").click(function () {//检查 DOM 中下一个元素的可见性jQuery(this).next().slideToggle();//向下滑动});

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

查看地图//使用一些 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>

解决方案

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

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script><script type="text/javascript">$(函数(){//创建一个中心var c = new google.maps.LatLng(-33.8790, 151.2064);//创建地图选项对象var mapOptions = {缩放:14，中心:c，mapTypeId: google.maps.MapTypeId.ROADMAP};var map = new google.maps.Map(document.getElementById('maps'), mapOptions);$(".toggle").click(function () {//检查 DOM 中下一个元素的可见性$(this).next().slideToggle(300, function(){google.maps.event.trigger(地图，调整大小")；//调整地图大小地图.setCenter(c);//设置中心});//向下滑动});});

I've read other similar threads but nothing with a question / response which helps make it simple enough to understand what I need to do. I'm using jQuery version 1.7 which possibly explains why some of the code posted in other questions is dissimilar.

Google maps loads in a slideToggle'd div with the center point offset to the North West and not visible relative to the portion of the map which is displayed when the div is toggled open. I'm trying to get a very simple map to display, nothing fancy.

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

My jQuery knowledge is limited, but I understand I need to force the iframe to load after the div is toggled. I just don't know how to achieve this! The HTML / PHP code is as below.

<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>

解决方案

You may need to look at loading the map dynamically using JavaScript and the Maps API. In this process you'll create a center point object which can then be reused to reset the center of the map in the toggle callback function. Something like this should work.

<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>

这篇关于jQuery SlideToggle 谷歌地图问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！