最佳做法

JS 最佳实践

Maps JavaScript API 仅适用于标准的 ECMAScript 和 W3C DOM 环境。这意味着，如果修改或替换浏览器所提供的内置类和对象的行为，则可能会导致 Maps JavaScript API 无法正常运行。有时，其他库可能会与 Maps JavaScript API 冲突，它们会更改浏览器的行为，使其不再是标准的 ECMAScript 环境。Maps JavaScript API 与这些库不兼容。

已知与 Maps JavaScript API 不兼容的库：

  • 原型：以非标准的方式替换 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 元素，例如 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，请尝试以下操作：

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

CSS 示例：

html {
  box-sizing: border-box;
}

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

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