最佳做法

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 不支持对用户代理样式表进行更改。如果框架或组件引用了 Maps JavaScript API 的 CSS 类或 DOM 元素,则可能会发生其他 CSS 冲突。

为避免这些冲突,我们提供了几项建议供您参考。

特异性

嵌入和关联的 CSS 会先于 Google 地图样式应用于您的地图。如果您的所有网页样式均在嵌入或关联的 CSS 中定义,请遵循特异性规则,以确保应用于地图的样式正确无误。

您的网页样式可能会覆盖常见的 CSS 元素,例如 imgbuttona。当 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,请尝试以下操作:

  • 创建一项将 <html> 元素设置为 border-boxbox-sizing 替换操作。
  • 为您的地图以外的所有元素使用 box-sizing: inherit
  • 创建一个将 box-sizing 元素重置为 initial 的自定义地图容器。

CSS 示例:

html {
  box-sizing: border-box;
}

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

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