谷歌地图v3在WordPress加载后移位

Google Maps v3 Shifting After Loading in Wordpress

本文关键字：加载 WordPress v3 谷歌地图      更新时间：2023-09-26

该页面使用Google地图加载，并且最初不会填充其周围的容器。半秒钟后，谷歌地图填满了容器。

问题是容器正确填充后它会变形。由于偏移，经线显示其中两条彼此相邻。地图控件也失真了。甚至看不出缩放栏在那里。

任何帮助将不胜感激！

这是我刚刚开始构建的Wordpress插件的一部分。

我还不能发布图片，否则我会！

问题出在默认的主题wordpress使用中。下面的代码行概述了它只允许它达到弄乱谷歌地图所需的宽度的 97.5%。

.entry-content img, .comment-content img, .widget img { max-width: 97.5%; }

正确的代码（或对我有用的代码）：

.entry-content img, .comment-content img, .widget img { max-width: none; }

我以前遇到过几次这个问题，而不是使用wordpress，因为我避开了那个包。但是我有两个原因...

每次查看/加载地图后才会发生一次，这是由于 gmaps 外部脚本调用被加载了多次。

第二个是由于相对/绝对位置元素影响了地图块元素......我不能100%地回忆起那之后的几周

。

您如何处理加载事件等等...

我决定写一个答案来帮助其他人解决同样的问题。

我最近偶然发现了这个问题，并且遇到了同样的问题以及其他问题。谷歌地图缩放栏不可见，每张图片都有一个漂亮的灰色边框:) 由于二十三个主题中的默认样式而导致的所有问题：

/* Responsive images */
.entry-content img,
.comment-content img,
.widget img {
    max-width: 100%; /* Fluid images for posts, comments, and widgets */
}

和更低

.entry-content img,
.comment-content img,
.widget img,
img.header-image,
.author-avatar img,
img.wp-post-image {
    /* Add fancy borders to all WordPress-added images but not things like badges and icons and the like */
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

我把我的谷歌地图对象放在一个id = map_canvas的div中。解决方案是添加我的样式覆盖上述样式：

 #map-canvas img {
     max-width: none!important;
    border-radius: none!important;
    box-shadow: none!important;
 }

瞧！地图很干净:)

相关文章：