2

此代码在 jsfiddle 和任何其他 JavaScript 沙盒应用程序上完美运行，但在我的网站上不起作用。

HTML：

<div id="mapcontainer" style="position:absolute;width:280px;height:160px;"></div>

JS：

<script src="http://maps.googleapis.com/maps/api/js?key=*********************************&sensor=false"></script>
<script>
    var myCenter = new google.maps.LatLng(33.436150, -117.623090);

    function initialize() {
        var mapProp = {
            center: myCenter,
            zoom: 9,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById("mapcontainer"), mapProp);

        var marker = new google.maps.Marker({
            position: myCenter,
        });

        marker.setMap(map);

        google.maps.event.trigger(map, 'resize')
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

它看起来像这样：

在此处输入图像描述

注意顶部 2/3 是如何扭曲的，底部 1/3 是如何正常的。我怎样才能解决这个问题？

4

3 回答 3

1

看来代码中一定还有其他问题。

你的谷歌地图代码看起来很完美，我做了一个小提琴来展示差异。

从您的脚本看来，您正在使用 google maps 的密钥。我认为这在 v3 中是没有必要的。所以尝试更换它，如下所示。

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
于 2013-06-29T19:21:43.600 回答
1

在我正在开发的谷歌地图上遇到同样的问题后，我偶然发现了这个页面。我想出的解决方案是在 google map javascript 之后添加以下代码。

$(window).resize(function(){ initMap(); });

“initMap();” 部分是所以它只是刷新地图功能。如果您将函数命名为不同的名称，那么您需要使用它。最终我意识到这是解决问题的一个补丁。但它就像一种魅力，最终用户几乎察觉不到。您所做的就是在调整窗口大小时刷新地图功能。

于 2015-11-19T20:48:36.343 回答
0

由于在评论中解决了这个问题，我发现了一个类似的问题。

这是一个使用 css 调试器查看地图中的一个图像并查看它是否受到页面上任何其他样式的影响的案例

于 2015-10-08T19:41:45.817 回答