javascript - 有没有办法可以淡入 InfoWindow 的自定义内容？

Question

我在click 上设置了一个监听器，以获取我未创建 GoogleMaps (V3 API) 的标记。单击它时，我首先使用一些简单的纯 HTML 和“正在加载”gif 加载信息窗口。

然后我调用一个方法，该方法通过 ajax 获取内容并使用加载的数据调用infowindow.setContent(data)。但是动画 gif 和新加载的内容之间的转换相当难看。有没有办法让它成为淡入/淡出？

以下是加载内容的函数的代码:

function load_infowindow_content(infowindow, user_id){
    $.ajax({
        url: site_root +'usuario/map_infowindow/' + user_id,
        success: function(data) {
            infowindow.setContent( data );
        }
    });
}

环顾四周，没有发现任何东西。提前致谢。

Answer 1

您可以将数据附加到具有指定 id 的 div 容器，然后使用 jQuery 的 .fadeIn() 方法让它淡入。由于该对象以前不是不可见的，因此您可能必须先隐藏它，然后让 jQuery 从容器不可见过渡到完全可见，如下所示:

$("#mapContentContainer").hide().fadeIn("slow");

编辑

Google Maps API V3 InfoBox using jQuery fadeIn and fadeOut 上描述了一种更具体的 GoogleMaps 方式。 (感谢Intheblue25):

»实际上可以淡入信息框，您必须重写 infobox.js 文件中的绘制函数，如下所示:«

var oldDraw = ib.draw;
ib.draw = function() {
    oldDraw.apply(this);
    jQuery(ib.div_).hide();
    jQuery(ib.div_).fadeIn('slow'); 
}