Javascript 谷歌反应地图-如何改变控制颜色？

我使用

googlereact-maps

与

zoomControl

和

mapTypeControl

：

{}{…mapProps}样式={{
身高：“100%”
}}api键={key}选项构造函数={（映射）=>{
返回{
disableDefaultUI:true，
键盘快捷键：正确，
mapTypeId:maps.mapTypeId.HYBRID，
mapTypeControl:true，
mapTypeControlOptions：{
样式：maps.MapTypeControlStyle.DROPDOWN_菜单，
位置：maps.ControlPosition.TOP\u右
},
scaleControl：对，
旋转控制：对，
旋转控制：{
位置：maps.ControlPosition.RIGHT\u TOP
},
动物控制：对，
ZoomControl选项：{
位置：maps.ControlPosition.RIGHT\u TOP
}
}
}}>

---

如何更改缩放和贴图类型控制背景颜色？

只需针对元素，然后添加CSS背景颜色（div>div>div>按钮）。通过在css中使用类而不是元素，可以更加具体。以下是我所做的（检查CSS代码）：

函数initMap（）{
var半径=10000；
var-latlng={lat:47.423201，lng:-120.311193}；
var map=new google.maps.map（document.getElementById（'map'）{
中心：拉特林，
街景控制：错误，
缩放：8
});
}

#地图{
身高：50%；
}
html，正文{
身高：100%；
保证金：0；
填充：0；
}
div>div>div>按钮{/*这就是我所做的*/
背景颜色：红色！重要
}

JS-Bin

你不能。如果希望完全控制外观，请创建自己的外观。

  <Map onMount={(map, maps) => {}} {...mapProps} style={{
      height: '100%'
    }} api-key={key} optionsConstructor={(maps) => {
      return {
        disableDefaultUI: true,
        keyboardShortcuts: true,
        mapTypeId: maps.MapTypeId.HYBRID,
        mapTypeControl: true,
        mapTypeControlOptions: {
          style: maps.MapTypeControlStyle.DROPDOWN_MENU,
          position: maps.ControlPosition.TOP_RIGHT
        },
        scaleControl: true,
        rotateControl: true,
        rotateControlOptions: {
          position: maps.ControlPosition.RIGHT_TOP
        },
        zoomControl: true,
        zoomControlOptions: {
          position: maps.ControlPosition.RIGHT_TOP             
        }
      }
    }}>