使用 jQuery 淡入和淡出的 Google Maps API V3 信息框答案

【问题标题】：Google Maps API V3 InfoBox using jQuery fadeIn and fadeOut使用 jQuery 淡入和淡出的 Google Maps API V3 信息框
【发布时间】：2011-10-11 01:08:21
【问题描述】：

我在网上到处搜索，但找不到使用 jQuery 在 Google 地图中淡化 InfoBox/InfoWindow 的教程或示例，而不是实际框/窗口的内容。这是我的代码，我不确定我做错了什么，但似乎也有些不对劲。

google.maps.event.addListener(marker, 'mouseover', function() {
    ib.setContent(html);
    ib.open(map, marker);
    ib.setValues({type: "point", id: 2})

   var idName = marker.get("id"); //I was trying to the id's of the elements here 
   var boxName = ib.get("id");    //to use in my jQuery

   jQuery(idName ).mouseover(function() {
      jQuery(boxName ).fadeIn('slow', function() {
    // Animation complete
   });
  });

});

【问题讨论】：

我在想一些类似的事情，themeforest.net/item/…。因此，可能无法使用本机信息框/窗口控件，但可能无法使用自定义？

标签： jquery google-maps fade infowindow openinfowindowhtml

【解决方案1】：

其实可以淡入信息框，你必须像这样覆盖infobox.js文件中的draw函数

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

【讨论】：

淡出怎么样？我们应该重写哪个函数？

【解决方案2】：

我为一个网站尝试了类似的东西。这是我的代码。 (gm-api-v3)

var infowindow = new google.maps.InfoWindow({
    content: contentString
});

function iwFadeIn() {
    infowindow.open(map, marker);
    var iw_container = $(".gm-style-iw").parent();
    iw_container.stop().hide();
    iw_container.fadeIn(1000);
}

【讨论】：

这对我有用，对我的设置进行了一些小调整。 ' marker.addListener('click', function() { infowindow.open(map, marker); var iw_container = $(".gm-style-iw").parent(); iw_container.stop().hide() ; iw_container.fadeIn(1000); });'

【解决方案3】：

如果你重写 draw 方法并应用淡入，即使你在地图中拖动或放大/缩小动画也会播放。如果你不希望这种情况发生，你可以应用淡入domready 处理程序方法。在这种情况下，只有在打开信息窗口时才会出现淡入效果。

 google.maps.event.addListener(ib, 'domready', function() {
            jQuery(ib).hide().fadeIn('slow');
 })

;

【讨论】：

【解决方案4】：

我正在使用带有标签 (http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.5/docs/examples.html) 的 google 实用程序库标记

在标签上使用jquery很容易。

google.maps.event.addListener(marker, "mouseover", function (e) { 
    //console.log(this); this.label.labelDiv_.style.display = 'block'; 
    $(this.label.labelDiv_).fadeIn();
});

google.maps.event.addListener(marker, "mouseout", function (e) { 
    //this.label.labelDiv_.style.display = 'none'; 
    $(this.label.labelDiv_).fadeOut();
});

【讨论】：

【解决方案5】：

fadeOut效果可以通过添加class和setTimeout来实现。让我解释。

例如：

$('.close-el')
        .on('click', function(e) {
            e.stopPropagation();
            $(infobox.div_).addClass('is-closing');
            setTimeout(function() {
                infobox.close();
            }, 700);
    });

当您添加 CSS 类时，并且在 css 转换结束后关闭信息框

和 CSS（sass）（.infoBox 是保留类）

.infoBox {
    &.is-closing {
        transition: transform 400ms, opacity 400ms;

        transform: translate3d(0, 30px, 0);
        opacity: 0;
    }
}

【讨论】：

【解决方案6】：

我认为这是不可能的，因为 Google 不提供动画选项。

尝试获取 Dom 元素也不行。 ib 变量是 google.maps.InfoWindow 类而不是 DOM 元素。由于没有公共接口来获取信息窗口的 DOM 元素，您将无法自己访问它。

如果您使用console.log(ib.get("id"))，您将看到 ID 未定义。

【讨论】：

约翰，感谢您查看此内容，请查看我在编辑中提供的链接，看看您的想法。
他们正在做自己的信息框。在他们的 iframe 中查看 wpnavigator 在第 155 行附近有一个脚本。他们也在使用这个插件gmap3.net。