最佳做法

JS 最佳做法

Maps JavaScript API 僅適用於標準 ECMAScript 和 W3C DOM 環境。這表示修改或覆寫瀏覽器所提供內建類別和物件的行為，可能會導致 Maps JavaScript API 無法運作。其他程式庫有時可能會變更瀏覽器行為，與 Maps JavaScript API 發生衝突，導致瀏覽器不再是標準 ECMAScript 環境。Maps JavaScript API 與這些程式庫不相容。

已知與 Maps JavaScript API 不相容的程式庫：

  • Prototype：以非標準方式覆寫 Array.from() 和 Element.prototype.remove()。
  • MooTools (較舊版本)：以非標準方式覆寫 Array.from()。
  • DateJS (較舊版本)：以非標準方式覆寫 Date.now()。

有時修改不相容的程式庫即可移除非標準覆寫。

CSS 最佳做法

使用 Maps JavaScript API 新增或自訂地圖時，您套用至網頁的部分樣式可能會覆寫地圖樣式，並導致 CSS 衝突。如果您使用 CSS 架構或 JavaScript 元件設定樣式，可能會導致 CSS 與地圖樣式發生更多衝突。

CSS 架構和 JavaScript 樣式元件通常使用 CSS 重設或正規化程序，處理瀏覽器之間的算繪差異。架構通常使用 box-sizing 元素來調整網頁元素的邊界和邊框，這往往需要將預設瀏覽器行為從 content-box 變更為使用 border-box。

這類 CSS 重設可能會導致 CSS 與 Maps JavaScript API 發生衝突，因為該 API 不支援變更使用者代理程式樣式表。如果架構或元件參照 CSS 類別或 Maps JavaScript API 的 DOM 元素，可能會發生更多 CSS 衝突。

為避免這類衝突，以下列出幾項建議供您參考。

優先權

系統會先將嵌入和連結的 CSS 套用到地圖中，然後才套用 Google 地圖樣式。如果所有網頁樣式都在嵌入或連結的 CSS 中定義，請遵守優先權規則，確保地圖套用正確的樣式。

網頁樣式可能會覆寫常見的 CSS 元素 (例如 img、button 和 a)。最常見的情況之一，是 img 元素的 max-width 屬性設為 100%。這可能導致地圖元件扭曲或隱藏，尤其是使用 InfoWindow 時。

如要修正這個問題，您可以更新地圖的 img 元素，將 max-width 屬性設為 none。例如：

#map img
{
    max-width : none;
}

類別名稱

請勿參照 JavaScript Maps API 的類別名稱和內部 DOM 元素。系統不支援這類操作，而且這可能會導致網站未經通知就發生破壞性變更。建議您改為建立自己的 CSS 類別做為地圖的容器。

如果 CSS 架構或 JavaScript 元件使用這些類型的參照，則可用 Box-sizing 覆寫建議做為替代方案。

CSS Box-sizing 覆寫

若出現地圖樣式衝突，CSS Box-sizing 覆寫或許是可行的解決方法。如果您使用 CSS 架構或 JavaScript 樣式元件，這項功能就特別實用。例如，如果 box-sizing 設為 border-box，建議您嘗試下列做法：

  • 建立 box-sizing 覆寫，將 <html> 元素設為 border-box。
  • 為您地圖以外的所有元素使用 box-sizing: inherit。
  • 建立自訂地圖容器，將 box-sizing 元素重設為 initial。

CSS 範例：

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.container-map {
  box-sizing: initial;
}