Javascript 谷歌地图控件

我发现了这样的问题

在那里他们有一个侧栏。但没有一个能真正做到我想要的。他们都提到这样的东西：

但我需要的是另一边的边栏，这是“谷歌用户界面”，我可以添加html

就像侧边栏上你可以点击箭头，它会隐藏

---

有没有关于如何做到这一点的例子？整个侧边栏是控件吗

谷歌实现这一功能的方式是添加一个

元素，其中

位置：绝对包含侧栏html的样式。它们包括一个切换按钮，只需将面板移出屏幕即可。下面的JSFIDLE应该让您开始做您想做的事情：

我没有让它看起来漂亮；这只是使用谷歌地图显示/隐藏面板的一种方法的演示。您可以根据自己的喜好定位和设置按钮的样式，并在面板中放置您想要的任何内容

Google Maps API CSS成功的关键：请记住，地图画布需要高度和宽度：

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

答复:

这是一个可以在两个元素上运行并同时调整其大小的函数

/*
* @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);
};

/*
*@param el1要移动的jQuery元素（非空）
*@param el1要调整大小的jQuery元素（非空）
*@param pos移动位置（非空）
*@param dur移动它的持续时间（非空）
*@param shw显示或隐藏
*@param f1函数调用每x个循环
*@param x见上文
*@param f2函数在完成后调用
*/
Maps.ui.slide=功能（el1、el2、pos、dur、shw、f1、x、f2）{
shw=（shw==null）？false:shw；
x=（x==null）？1:x；
f1=（f1==null）？新函数（）{}:f1；
f2=（f2==null）？新函数（）{}:f2；
dur=（dur==null）？1000:dur；
dur=dur/pos；
var p=pos/100；
var t=0；
var r=x；
var to=函数（）{
如果（！shw&&t<100）{
t+=p；
t=（t>100）～100:t；
el1.css（“左”、“右”+pos-（pos*t/100））；
el2.css（“左”，位置-（位置*t/100））；
如果（r==0）{f1（）；r=x；}否则r-=1；
设置超时（至，dur）；
}否则如果（shw&t<100）{
t+=p；
t=（t>100）～100:t；
el1.css（“左”，位置-（位置*t/100））；
el2.css（“左”（pos*t/100））；
如果（r==0）{f1（）；r=x；}否则r-=1；
设置超时（至，dur）；
}如果（t>=100）{f1（）；f2（）；}
}
设置超时（至，dur）；
};
谢谢。给了我一个我真正想要的想法。