1

我在一个网页中有多个谷歌地图，如下所示

<div class="map_wrapper">
    <div class="map_heading"><h2>Map1</h2><a href="#" class="map_link">Map Show</a></div>
    <div class="map_canvas">map parameters goes here</div>
</div>
<div class="map_wrapper">
    <div class="map_heading"><h2>Map1</h2><a href="#" class="map_link">Map Show</a></div>
    <div class="map_canvas">map parameters goes here</div>
</div>
<div class="map_wrapper">
    <div class="map_heading"><h2>Map1</h2><a href="#" class="map_link">Map Show</a></div>
    <div class="map_canvas">map parameters goes here</div>
</div>

我正在使用谷歌地图v3，地图功能很好，我有功能maps_init();

所以我用jquery

这样

$(document).ready(function(){
$(".map_link").click(function(){
        $(this).parent().parent().children(".map_canvas").slideToggle(100);
        var map = $(this).parent().parent().children(".map_canvas");
        maps_init(map);
    });
});

当我单击链接然后它调用该函数时如何使它工作，否则永远不会再次调用该函数，因为用户可以单击"map_link"多次查看，并且每次它初始化函数时，所以我需要在每个 div"map_wrapper"中引用它自己会检查。如果没有初始化，那么它将初始化，否则不会，我不能在map_init()函数中使用，document.ready()因为它初始化了所有的地图并且地图看起来不正确。

谢谢！

4

1 回答 1

4

您可以添加一个类来跟踪初始化的地图：

$(".map_link").click(function(){
        if(!($(this).hasClass('initialized')) {
            $(this).parent().parent().children(".map_canvas").slideToggle(100);
            var map = $(this).parent().parent().children(".map_canvas");
            maps_init(map);
            $(this).addClass('initialized');
        }
    });
});

可能不是最干净的解决方案，但我想它既简单又快速

或者

你可以使用 jQuery 的“one”方法，它只会触发一次：

http://jsfiddle.net/jonigiuro/WQPjn/

$('a').one('click', function(e) {
    alert('map initialized');
    e.preventDefault();
});

在你的情况下：

$(document).ready(function(){
$(".map_link").one('click',function(){
        $(this).parent().parent().children(".map_canvas").slideToggle(100);
        var map = $(this).parent().parent().children(".map_canvas");
        maps_init(map);
    });
});
于 2013-09-03T14:10:13.083 回答