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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 02:06:20  来源:igfitidea点击:

Move zoom bar to the right with Google Maps API v3

javascriptgoogle-maps-api-3positioning

提问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: default google api

我希望将 Google Maps Javascript API 中的缩放控件从左向右移动。如果我们保留默认设置,我们有这个: 默认谷歌 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:

然后我们得到这个:

right api

正确的api

I've also noticed that if you set it to the left (not default), you get:

我还注意到,如果将其设置在左侧(非默认值),则会得到:

left

剩下

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 panControland zoomControlinto one position - either google.maps.ControlPosition.TOP_RIGHTor google.maps.ControlPosition.RIGHT_TOP.

是的,你可以做到。您必须将panControlzoomControl置于一个位置 -google.maps.ControlPosition.TOP_RIGHTgoogle.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)。如果您将控件放在不同的位置,它们将被放入适当缩放和定位的单独容器中。