谷歌地圖的css覆蓋了我自己的樣式，如何防止這種情況？

Question

我正在將Angular 7.2.2與Typescript一起使用。

我正在通過index.html中的<script> -tag從“ https://maps.googleapis.com/maps/api/js?key=myAPIkey ”導入Google Maps

腳本加載完成后，我可以看到我的某些樣式被Google Map的樣式覆蓋了整個應用程序。

如何防止這種情況並確保Google Map的樣式僅應用於將在其中渲染地圖的組件？

我試圖從顯示組件內部動態加載腳本，但是顯然，樣式封裝僅適用於“ styleUrls”參數提供的樣式。

謝謝！

Answer 1

因此，在您的角度應用程序中使用的類在Google Maps API樣式中的名稱相同。

樣式將按照將它們放入angular.json文件中的順序導入，然后，一旦初始化，則index.html文件將加載其腳本，該腳本將在從angular.json讀取樣式表之后發生。

因此，您似乎可以選擇更改要覆蓋的類的名稱，以使Google不會覆蓋它們，因為我不知道與當前Google Maps保持最新關系的Google Maps NPM軟件包。您會找到一個，也可能會起作用。

Answer 2

謝謝大家，我想我已經回答了我的問題。

萬一其他人因這個愚蠢的錯誤而迷迷糊糊：

我使用Angular Material，后者又將Roboto Medium作為默認字體。

由於我沒有安裝正確的webfont，因此我的應用程序使用Arial作為后備。

現在，當我加載還使用Roboto並正確加載該字體的Google Maps腳本時，我的整個應用程序從Arial切換到Roboto。

這使我認為樣式被覆蓋。

（感謝洛倫茲處理我的拙劣著作：）