javascript 使用 Google Maps API v3 将缩放栏向右移动
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/8049029/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Move zoom bar to the right with Google Maps API v3
提问by ingh.am
I'm looking to move the zoom controls in the Google Maps Javascript API from the left to the right. If we leave the default setup we have this:
我希望将 Google Maps Javascript API 中的缩放控件从左向右移动。如果我们保留默认设置,我们有这个:
If I move it over like so:
如果我像这样移动它:
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.RIGHT_TOP
}
Then we get this:
然后我们得到这个:
I've also noticed that if you set it to the left (not default), you get:
我还注意到,如果将其设置在左侧(非默认值),则会得到:
Ideally I would like it on the right and centered to the pan controls just like the default settings but on the other side. Is there anyway of doing this?
理想情况下,我希望它在右侧并以平移控件为中心,就像默认设置一样,但在另一侧。反正有这样做吗?
回答by Tomik
Yes, you can do it. You have to put both panControl
and zoomControl
into one position - either google.maps.ControlPosition.TOP_RIGHT
or google.maps.ControlPosition.RIGHT_TOP
.
是的,你可以做到。您必须将panControl
和zoomControl
置于一个位置 -google.maps.ControlPosition.TOP_RIGHT
或google.maps.ControlPosition.RIGHT_TOP
。
Use either:
使用:
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.TOP_RIGHT
}
or:
或者:
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.RIGHT_TOP
}
A simple explanation is that Google maps have a container at each controls position. Each of these containers is positioned and scaled such that all the required controls fit in. A control is then centered if there's some remaining space (in this case the width of the container is specified by the width of panControl
). If you put the controls into separate positions, they are put into separate containers which are scaled and positioned appropriately.
一个简单的解释是谷歌地图在每个控件位置都有一个容器。这些容器中的每一个都被定位和缩放,以便所有需要的控件都适合。如果有一些剩余空间,则控件会居中(在这种情况下,容器的宽度由 的宽度指定panControl
)。如果您将控件放在不同的位置,它们将被放入适当缩放和定位的单独容器中。