使用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
}

然后我们得到这个：

我还注意到，如果将其设置为左侧（而非默认值），则会得到：

理想情况下，我希望它在右侧并居中于 pan 控件，就像默认设置一样，但在另一侧。有没有什么办法可以实现这个效果？

- ingh.am

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
}

一个简单的解释是，谷歌地图在每个控件位置上都有一个容器。这些容器的位置和大小调整得足够放置所需的所有控件。如果还有多余的空间（在这种情况下，容器的宽度由 panControl 的宽度指定），则控件将居中对齐。如果将控件放在不同的位置，则它们会分别放入适当的容器中，并进行缩放和定位。

- Tomik

---

一个关于RIGHT_TOP和TOP_RIGHT的图片 https://developers.google.com/maps/documentation/javascript/images/control-positions.png - PJunior

嘿，我们可以也进行样式设计吗？如果我想要添加自定义图像或样式来控制缩放按钮，这是可能的吗？ - Roydon D' Souza