Google Maps Javascript API忽略输入字段的CSS_Javascript_Html_Css_Google Maps Api 3

Google Maps Javascript API忽略输入字段的CSS

javascript html css google-maps-api-3

Google Maps Javascript API忽略输入字段的CSS,javascript,html,css,google-maps-api-3,Javascript,Html,Css,Google Maps Api 3,加载地图后，我的CSS被忽略我意识到没有办法用纯CSS设置参数那么我该如何修复它呢 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #map {height: 100%;} #map .map-control1 {top: 0px;} #map .map-control2 {top: 50px;}

加载地图后，我的CSS被忽略

我意识到没有办法用纯CSS设置参数

那么我该如何修复它呢

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      #map {height: 100%;}
      #map .map-control1 {top: 0px;}
      #map .map-control2 {top: 50px;}
      #origin-input, #destination-input {text-overflow: ellipsis;} 
    </style>
  </head>
  <body>
    <input id="origin-input" class="map-control1" type="text"
        placeholder="Origin">
    <input id="destination-input" class="map-control2" type="text"
        placeholder="Destination">
    <div id="map"></div>
    <script>
    function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
        mapTypeControl: false,
        center: {lat: -23.0013, lng: -43.3861},
        zoom: 17
      });
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=_dsdsds&callback=initMap"
    async defer></script>
  </body>
</html>


#地图{高度：100%；}
#map.map-control1{top:0px；}
#map.map-control2{top:50px；}
#源输入，#目标输入{文本溢出：省略号；}
函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
mapTypeControl:false，
中心：{lat:-23.0013，lng:-43.3861}，
缩放：17
});

。贴图控件

从

#map

层叠而来。像这样删除它以获得所需的样式

.map-control1 { /* without #map */
  top: 0px;
}

.map-control2 { /* without #map */
  top: 50px;
}

.map-control1和.map-control2都在#main之外。因此相应地更改css。

.map-control1 { /* without #map */
  top: 0px;
}

.map-control2 { /* without #map */
  top: 50px;
}