Question

我找到了这样的问题Dynamically populated google maps sidebar

他们有侧栏的地方。但实际上并没有我想做的事。他们都引用了这样的内容：http://econym.org.uk/gmap/example_map2.htm

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

与https://maps.google.co.nz/上的侧边栏一样，您可以点击箭头隐藏它。

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

Answer 1

Google实施此功能的方法是添加<div>元素，其中position: absolute;样式包含侧边栏html。它们包括一个用于切换的按钮，只需将面板从屏幕移开即可。以下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);
};

谷歌地图控件

1 个答案: