使用 Google Maps API v3 将缩放栏移至右侧

Question

我希望将 Google Maps Javascript API 中的缩放控件从左移到右。如果我们保留默认设置，我们会得到以下结果：

如果我像这样移动它：

panControl: true,
  panControlOptions: {
  position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
  style: google.maps.ZoomControlStyle.LARGE,
  position: google.maps.ControlPosition.RIGHT_TOP
}

然后我们得到这个：

我还注意到，如果将其设置到左侧（不是默认值），您会得到：

理想情况下，我希望它位于右侧并居中于平移控件，就像默认设置一样，但位于另一侧。有办法这样做吗？

Answer 1

是的，你可以做到。您必须将 panControl 和 zoomControl 置于一个位置 - google.maps.ControlPosition.TOP_RIGHT 或 google.maps.ControlPosition .RIGHT_TOP。

使用：

panControl: true,
panControlOptions: {
  position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
  style: google.maps.ZoomControlStyle.LARGE,
  position: google.maps.ControlPosition.TOP_RIGHT
}

或：

panControl: true,
  panControlOptions: {
  position: google.maps.ControlPosition.RIGHT_TOP
},
zoomControl: true,
zoomControlOptions: {
  style: google.maps.ZoomControlStyle.LARGE,
  position: google.maps.ControlPosition.RIGHT_TOP
}

一个简单的解释是，Google 地图在每个控件位置都有一个容器。这些容器中的每一个都经过定位和缩放，以便容纳所有必需的控件。如果有一些剩余空间，则控件将居中（在这种情况下，容器的宽度由 panControl 的宽度指定） ）。如果将控件放在不同的位置，它们就会被放入单独的容器中，并进行适当的缩放和定位。