1

我有一个带有固定导航栏的网站，该导航栏应随页面滚动。当我添加 JS 谷歌地图时，导航栏不再移动：

http://amosjackson.com/map/index.html

此外，仅当地图绝对定位时才会出现此问题。

4

3 回答 3

11

将 translateZ 添加到固定元素

-webkit-transform: translateZ(0);

我在分析整个谷歌地图画布时发现了。API 还会 -webkit-transform: translateZ(0)向地图添加一个。这打破了许多浏览器正确绘制固定元素的问题。

此外，固定元素还可能需要其他相关的可见性属性z-index，例如不透明度。

一个可行的解决方案：（我总是将我的地图画布放入容器中）

.my-fixed-elem {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -o-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  z-index: 500 // adapt for your project
  opacity: 1 // some times you can remove this
}

.map-canvas-container {
    width: 100%; // somewidth
    height: 750px; // someheight
    position: relative;
    z-index: 18;
    top: 0;
    left: 0;
}

#map-canvas-contact {
    width: 100%;
    height: 100%;
}

此致

于 2013-11-19T19:56:48.683 回答
0

从谷歌地图 div 中删除 z-index 并为其赋予一个不透明度值，以便文本变得可见.. 玩弄它们..

希望有帮助..

于 2013-05-03T19:16:14.670 回答
0

这是与添加到外部地图元素的“转换”css 设置相关的某种 webkit 错误。transform:translateZ(0px) 被添加到样式属性中，但不需要在其中，删除它没有效果。

所以答案是在页面中添加一个 css 行并使用 !important 标志，这样它将覆盖样式属性的设置。

<style>
#map-canvas[style] { -webkit-transform:none !important; }
</style>

请注意，[style] 部分仅在 google 添加 style 属性时才生效，并且可能需要更改 #map-canvas 以匹配您发送给 google.maps.Map() 的元素

于 2015-09-23T18:14:37.583 回答