0

このような質問を見つけました動的に入力されたGoogleマップのサイドバー

サイドバーがある場所。しかし、実際に私が望むことをするものはありません。それらはすべて次のようなものを参照しています: http://econym.org.uk/gmap/example_map2.htm

しかし、必要なのは反対側のサイドバーです。これは「google ui」で、html を追加するだけです。

https://maps.google.co.nz/のサイドバーのように、矢印をクリックすると非表示になります。

これを行う方法の例はありますか? そのサイドバー全体がコントロールになりますか?

4

1 に答える 1

2

Google がこの機能を実装した方法は、サイドバー html を含むスタイルを持つ<div>要素を追加することです。position: absolute;それらには、パネルを画面の外に移動するだけのトグル用のボタンが含まれています。次の jsFiddle を使用すると、やりたいことを始めることができます: http://jsfiddle.net/x8rfd/4/

私はそれをきれいに見せていません。これは、Google マップでパネルを表示/非表示にする 1 つの方法のデモンストレーションにすぎません。ボタンを好きなように配置してスタイルを設定し、必要なコンテンツをパネルに配置できます。

Google Maps API CSS の成功の鍵: マップ キャンバスには高さと幅が必要であることに注意してください。

#map-holder {
    position: absolute;
    height:300px;
    width:100%;
}
#map {
    width: 100%;
    height: 100%;
}

答え：

これは、2 つの要素に対して実行し、同時にサイズを変更できる関数です。

/*
* @param el1 the jQuery element to move (not null)
* @param el1 the jQuery element to resize (not null)
* @param pos the position to move it (not null)
* @param dur the duration to move it (not null)
* @param shw show or hide
* @param f1 function to call every x loops
* @param x see above
* @param f2 function to call once done
*/
Maps.ui.slide = function(el1, el2, pos, dur, shw, f1, x, f2){
    shw = (shw===null)?false:shw;
    x = (x===null)?1:x;
    f1 = (f1===null)?new function(){}:f1;
    f2 = (f2===null)?new function(){}:f2;
    dur = (dur===null)?1000:dur;
    dur = dur/pos;
    var p = pos/100;
    var t = 0;
    var r = x;
    var to = function(){
        if(!shw && t < 100){
            t += p;
            t = (t > 100)?100:t;
            el1.css("left", "-" + pos - (pos * t/100));
            el2.css("left", pos - (pos * t/100) );
            if(r == 0){f1();r=x;}else r-=1;
            setTimeout(to, dur);
        }else if(shw && t < 100){
            t += p;
            t = (t > 100)?100:t;
            el1.css("left",  pos - (pos * t/100));
            el2.css("left", (pos * t/100));
            if(r == 0){f1();r=x;}else r-=1;
            setTimeout(to, dur);
        }else if(t >= 100){f1();f2();}
    }
    setTimeout(to, dur);
};
于 2013-01-25T00:17:14.900 に答える