Question

该页面加载了Google地图，但最初并未填充其周围的容器。半秒后谷歌地图填满了容器。

问题是容器正确填充后会扭曲。由于班次的经度线显示其中两个紧挨着彼此。并且地图控件也被扭曲了。甚至不能告诉缩放栏是否存在。

非常感谢任何帮助！

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

我无法发布图片或者我会发布！

Answer 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; }

Answer 2

我之前经历过几次这个问题，而不是使用wordpress，因为我从那个包中明确了..但是我有两个原因......

只有在查看/加载地图后才会出现一次，这是因为gmaps外部脚本调用被加载了一次以上。

第二个是由于影响地图块元素的相对/绝对位置元素...我不能回忆100％，因为那几周以来......

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

Answer 3

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

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

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

我在div中使用了id = map_canvas的google-map对象。解决方法是在我的样式中添加以上样式的覆盖：

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

瞧！瞧！地图很干净：）

加载到Wordpress后，谷歌地图v3转移

3 个答案: