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 元素,例如 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;
}