代码之家 › 专栏 › 技术社区 › Justinas Jakavonis

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

google-maps-api-3 google-maps reactjs javascript

0

Justinas Jakavonis · 技术社区 · 7 年前

我用 google-react-maps 具有 zoomControl 和 mapTypeControl :

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

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

1 回复 | 直到 7 年前

1

tomjosef 7 年前

只需瞄准元素,然后添加css背景色(div>div>div>按钮)。通过在css中使用类而不是元素,您可以更加具体。下面是我做的(检查css代码):

function initMap(){
  var radius = 10000;
  var latlng = {lat:47.423201, lng:-120.311193};
  var map = new google.maps.Map(document.getElementById('map'), {
    center: latlng,
    streetViewControl:  false,
    zoom: 8
  });
}

#map{
   height:50%;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

div > div > div > button { /* this is what I did */
  background-color: red !important
}

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
      <script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=YOUR_API_KEY&callback=initMap" async defer></script>   
   </head>
   <body>
      <div id="map"></div>
   </body>
</html>

下面是一个工作示例: http://jsbin.com/cosezum/edit?html,css,js,output

希望这有帮助!