8

私はウェブを高低で検索しましたが、実際のボックス/ウィンドウのコンテンツではなく、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
   });
  });

});
4

6 に答える 6

12

infobox をフェードインすることは実際には可能です。このように infobox.js ファイルの draw 関数をオーバーライドする必要があります。

var oldDraw = ib.draw;
ib.draw = function() {
   oldDraw.apply(this);
   jQuery(ib.div_).hide();
   jQuery(ib.div_).fadeIn('slow'); 
}
于 2011-10-17T05:17:50.307 に答える
5

私はウェブサイトに似たようなことを試みました。これが私のコードです。(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-16T22:45:51.987 に答える
0

ラベル付きの 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();
});
于 2012-04-10T10:55:46.527 に答える
0

クラスと 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;
    }
}
于 2016-07-26T21:44:58.183 に答える
-1

グーグルはアニメーションオプションを提供していないので、これは可能ではないと思います。

Dom要素を取得しようとしても機能しません。ib変数は、DOM要素ではなくgoogle.maps.InfoWindowクラスです。情報ウィンドウのDOM要素を取得するためのパブリックインターフェイスがないため、これに自分でアクセスすることはできません。

を使用console.log(ib.get("id"))すると、IDが未定義であることがわかります。

于 2011-10-11T01:27:24.770 に答える