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

【问题标题】：Google Maps Javascript API ignore CSS for input fieldGoogle Maps Javascript API 忽略输入字段的 CSS
【发布时间】：2018-01-23 00:06:21
【问题描述】：

加载地图后，我的 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>

【问题讨论】：

.map-control1 和 .map-control2 都在#main 之外。所以相应地改变css。

标签： javascript html css google-maps-api-3

【解决方案1】：

  #map {height: 100%;}
  .map-control1 {top: 0px;} // this should fix it
  .map-control2 {top: 50px;} // this should fix it
  #origin-input, #destination-input {text-overflow: ellipsis;}

【讨论】：

【解决方案2】：

.map-controls 从#map 级联。像这样删除它以获得所需的样式。

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

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

【讨论】：