使用jQuery fadeIn和fadeOut的Google Maps API V3 InfoBox
我已经在网上搜索了高低，并且无法找到使用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 }); }); }); 实际上可以淡化信息框，你必须覆盖infobox.js文件中的draw函数，就像这样
var oldDraw = ib.draw; ib.draw = function() { oldDraw.apply(this); jQuery(ib.div_).hide(); jQuery(ib.div_).fadeIn('slow'); }
我为网站尝试过类似的东西。 这是我的代码。 （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); }
如果您覆盖绘制方法并应用淡入，即使您在地图中拖动或放大/缩小，也会播放动画。如果您不希望这种情况发生，您可以在domready处理程序中应用fadeIn在这种情况下，只有在打开信息窗时才会出现淡入效果。
google.maps.event.addListener(ib, 'domready', function() { jQuery(ib).hide().fadeIn('slow'); })
;
我正在使用带有标签的google实用程序库标记（ 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(); });
可以通过添加class和setTimeout来实现fadeOut效果。 让我解释。
例如：
$('.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; } }
我不认为这是可能的，因为谷歌不提供动画选项。
试图获取Dom元素也不起作用。 ib变量是google.maps.InfoWindow类，而不是DOM元素。 由于没有公共接口来获取信息窗口的DOM元素，因此您将无法自行访问它。
如果使用console.log(ib.get("id"))您将看到ID未定义。