javascript - 如何将自定义 map 控件放置在 Google map 中的 "Google"标签上方？

Question

到目前为止我已经有了这个。

抱歉，我的电脑屏幕截图无法正常工作，所以我必须求助于这个东西。

无论如何，“卫星”按钮应位于“Google”标志上方，下方留出一些空间，并左对齐。我基本上有这个:

container = document.createElement("div")
ReactDOM.render(<div>Satellite</div>, container)
map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(container)

mapOptions =
  disableDefaultUI: true
  zoomControl: true
  zoom: 13
  styles: [{ featureType: "poi", elementType: "labels", stylers: [{ visibility: "off" }]}]
  mapTypeControl: true

map.setOptions(mapOptions)

我做错了什么？如果可能的话，我希望不必诉诸 CSS hack。

Answer 1

您可以使用以下方法设置控件的位置

map.setOptions({
    mapTypeControlOptions: {
        position: google.maps.ControlPosition.BOTTOM_LEFT
    }
})

或任何列出的枚举 here带有演示 here .

如果不借助自定义 CSS，就无法在这些控件上设置自定义像素或 % 位置。

这完全没问题，甚至官方文档也提供 examples for this !

在你的情况下，这意味着，例如，

.gmnoprint + .gmnoprint {
    left: -4px !important;
    bottom: 20px !important;
}

结果

<小时/>

在这些情况下通常会隐藏 Google 默认控件 creating your own div 和 button，然后将它们的点击事件绑定(bind)到 gmaps API。

话虽如此，在您创建并放置一个按钮来打开卫星 map 类型后，监听器的内容可以像这样简单

map.setOptions({
    mapTypeId: google.maps.MapTypeId.SATELLITE
})

并通过调用map.getMapTypeId()返回当前设置的ID。