Google Maps API V3 InfoBox使用jQuery的fadeIn和fadeOut

Question

我已经搜索了网络的高和低，并没有能够找到使用jQuery在谷歌地图上淡化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
   });
  });
});

Answer 1

实际上可以在infobox中淡出，您必须重写infobox.js文件中的绘制函数，如下所示

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

Answer 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);
}

Answer 3

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

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

,

Answer 4

我使用谷歌公用事业库标记标签(http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.5/docs/examples.html)

在标签上使用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();
});

Answer 5

可以通过添加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;
    }
}

Answer 6

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

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

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