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

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

  •  0
  • Justinas Jakavonis  · 技术社区  · 7 年前

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

    enter image description here

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

    希望这有帮助!

    推荐文章