在 Wordpress 中加载后的 Google Maps v3 移动答案

【问题标题】：Google Maps v3 Shifting After Loading in Wordpress在 Wordpress 中加载后的 Google Maps v3 移动
【发布时间】：2012-06-05 20:44:01
【问题描述】：

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

问题是在容器正确填充后它会变形。由于移位的经度线显示其中两个彼此相邻。并且地图控件也被扭曲了。甚至不能告诉缩放栏在那里。

非常感谢任何帮助！

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

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

【问题讨论】：

标签： javascript google-maps google-maps-api-3

【解决方案1】：

问题出在 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; }

【讨论】：

【解决方案2】：

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

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

第二个是由于影响地图块元素的相对/绝对位置元素......我无法回忆起 100% 的情况，因为那是几周后......

你如何处理 onload 事件等等...

【讨论】：

我正在使用 jQuery，并且在文档准备就绪时，它正在加载谷歌地图 API 以加载地图。你指的是这个吗？
是的..并确认当您说准备好文档时，您是通过 jquerys onload 事件处理程序加载它还是通过默认 body onload='' .... 因为我不相信 body 方法..尝试重新排序您的onload / init脚本...但是如果没有更多的见解就很难猜到这个...您可以发布一些示例行或类似的内容...说包含google box元素的行和通用地图加载脚本
我正在使用 jQuery $(document).ready(function(){ 在此处调用 google 的初始化函数 });
仍然需要多看一点或多解释一点，如果地图加载正常，则 doc/ready/init 工作正常。所以这将归结为实际的脚本地图或与包含它的元素有关的东西。您是否删除了裸脚本并在空白页面中进行了测试，以查看问题是遵循脚本还是与项目本身有关
我会在空白页上试试。如果它不起作用，我会在之后发布代码。非常感谢您的回复！

【解决方案3】：

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

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

/* 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);
}

我的 google-map 对象位于 id = map_canvas 的 div 中。解决方案是在我的样式中添加上述样式的覆盖：

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

瞧！地图很干净:)

【讨论】：