javascript - 谷歌地图控件

Question

我发现了这样的问题动态填充的谷歌地图侧边栏

他们有一个侧边栏。但没有一个真正做我想要的。他们都引用了这样的东西： http: //econym.org.uk/gmap/example_map2.htm

但我需要的是另一边的侧边栏，即“google ui”，我可以将 html 添加到。

就像https://maps.google.co.nz/上的侧边栏一样，您可以在其中单击箭头并将其隐藏。

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

Answer 1

Google 实现此功能的方式是添加一个包含侧边栏 html 样式的<div>元素。position: absolute;它们包括一个用于切换的按钮，只需将面板移出屏幕即可。以下 jsFiddle 应该让您开始您想要做的事情：http: //jsfiddle.net/x8rfd/4/

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

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