谷歌地圖JavaScript API忽略輸入字段的CSS

-1

加載地圖後，我的CSS被忽略< #map .map-control1/#map .map-control2>。谷歌地圖JavaScript API忽略輸入字段的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>

來源

2017-08-15 hbbz040

.map-control1和.map-control2都位於#main外部。所以相應地改變CSS。 – Aslam

.map-control s是#map級聯。像這樣刪除它以獲得所需的樣式。

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

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

來源

2017-08-15 04:56:26

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

來源

2017-08-15 04:55:05 Aslam

谷歌地圖JavaScript API忽略輸入字段的CSS

回答

相關問題