Google Maps API V3 InfoBox使用jQuery淡入淡出

我已經搜索了網頁的高低，並且一直沒能找到一個教程或者使用jQuery來淡入Google地圖中的InfoBox/InfoWindow的例子，而不是實際的內容盒子/窗口。這是我的代碼，我不確定我做錯了什麼，但是看起來也不對。Google Maps API V3 InfoBox使用jQuery淡入淡出

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

});

來源

2011-10-11 intheblue25

我在想這些問題，http://themeforest.net/item/the-navigator-premium-wp-location-guide-blog/full_screen_preview/397351。所以它可能無法使用本機信息框/窗口控件，但也許使用自定義？ – intheblue25

它實際上是可能的淡入的信息框，可以選擇覆蓋在infobox.js繪製函數文件中像這樣

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

來源

2011-10-17 05:17:50 intheblue25

淡出怎麼辦？我們應該重寫哪個函數？ – yulie

-1

我不認爲這是可能的，因爲Google不提供動畫選項。

嘗試獲取Dom元素也不起作用。 ib變量是一個不是DOM元素的google.maps.InfoWindow類。由於沒有公共接口來獲取信息窗口的DOM元素，因此您將無法自行訪問它。

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

來源

2011-10-11 01:27:24

約翰，謝謝你看這個，看看我在編輯中提供的鏈接，看看你的想法。 – intheblue25

他們正在做自己的信息框。看看他們的iframe wpnavigator有一個圍繞155行的腳本。他們也使用這個插件http://gmap3.net。 –

我使用與標籤（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(); 
});

來源

2012-04-10 10:55:46 morgan

如果忽略平局方法和應用淡入，即使你拖動，動畫將播放或放大/縮小在map.If你不希望這樣的事情發生，你可以在domready處理程序方法中應用fadeIn。在這種情況下，僅當您打開infowindow時纔會出現淡入效果。

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

;

來源

2012-10-12 08:41:00 user700284

我嘗試了類似的網站。這是我的代碼。（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); 
}

來源

2013-08-16 22:45:51 Jan

這對我來說很有效，對我的設置進行了小小的調整。 '\t \t \t \t \t marker。的addListener（ '點擊'，函數（）{ \t \t \t \t \t infowindow.open（地圖，標記）; \t \t \t \t \t VAR iw_container = $（「克式-IW」）父（）; 。 \t \t \t \t \t iw_container.stop（）隱藏（）; \t \t \t \t \t iw_container.fadeIn（1000）; \t \t \t \t \t}）;' – atomicadam

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

來源

2016-07-26 21:44:58

Google Maps API V3 InfoBox使用jQuery淡入淡出

回答

相關問題