Question

我遇到了iframed Google地图的问题。基本上，这个位置不正确，但并非总是如此。我认为问题可能与地图处于隐藏div中的事实有关，后者将在稍后显示。

任何人都可以验证这确实是一个问题，或者提出解决方案吗？我对地图没有多少控制权，因为它来自其他地方。

我试图给iframe一个ID，然后我用google.maps.event.trigger(map, "resize");在显示父容器的函数上定位，但无济于事。

修改
根据要求，这是地图：

<iframe width="450" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?ie=UTF8&amp;t=m&amp;ll=56.084298,11.074219&amp;z=6&amp;output=embed"></iframe>

正如你所看到的，它没有什么特别之处。它应该显示丹麦，但它有时显示德国和波兰。我相信这些都是不错的地方，但是客户看不到它的用处。

Answer 1

我也可以确认这个问题。我不认为它与你隐藏的div有关，因为我也有固定元素的问题。

问题在于，由于某种原因，您希望地图居中的位置最终位于iframe的左上角。我认为这是因为在google方面，地图调整大小事件在知道iFrame的完整大小之前就太早了。

试试这个，到目前为止它对我有用：

删除iframe src标记。

将以下javascript代码嵌入iframe下方的某个位置：

<script type='text/javascript'>
    jQuery("iframe#headerMap").attr("src", "http://maps.google.com/maps/ms?etc etc....");
</script>

因为它在iframe存在之后加载地图。如果将来我仍然遇到问题，我会尝试在上面的代码中添加一个短暂的延迟，使其在文档加载后运行。

Answer 2

简单的解决方案：

将iframe放入div中，id =“map”。
不要隐藏div，因为地图会生成错误。
将div绝对放置，左侧为10.000像素。在这种情况下，地图不会出现在屏幕上，但会被加载。

jQuery（'#map'）。css（{“position”：“absolute”，“left”：“ - 10000px”}）;

单击按钮显示地图时添加：

jQuery('#map').show(); jQuery('#map').css({"position":"static"});

隐藏div add：

的jQuery（ '＃地图'）隐藏（）;

Answer 3

“resize”事件将map对象作为参数，而不是id。由于您在iframe中使用maps.google.com，因此我认为无法访问实际的地图对象。

不幸的是，我认为最好的答案是转而使用Google Maps v3 API的简单实现，而不是在iframe中嵌入maps.google.com。这将允许您在需要时正确触发“调整大小”，因为您可以访问地图对象。

以下是文档：http://code.google.com/apis/maps/documentation/javascript/tutorial.html

设置一个简单的实现，例如：http://code.google.com/apis/maps/documentation/javascript/examples/map-simple.html

然后将您的电话留给google.maps.event.trigger（地图，“调整大小”）;当你显示隐藏的容器时。

Answer 4

在“标签”div中显示两张地图时，可以确认我遇到过这个问题。即一个div加载隐藏。

我发现解决问题的最简单方法就是使用一些试验和错误，并在复制和粘贴嵌入代码之前偏移地图，以补偿错误的地图偏移。但请记住将外部链接（下方链接到外部谷歌地图）保留为原始href，否则此地图也会偏移。

Answer 5

我建议在检查div是否可见之后加载地图有一些时间延迟将保留地图。为我工作

  $(document).ready(function () {
        $('.togglebtn').click(function () {

 if(!$('#map_canvas').is(':visible')){
                setTimeout(function(){initialize()}, 500);
                }
    });
});


   //your function
 function initialize() {


        var mapOptions = {
            zoom: 3,
          center :  new google.map.LatLng(31.510474,80.352287),
            center: new google.maps.LatLng(44.510474, 50.352287),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

        var contentSC_PAK = "SoftCircles Pakistan";
        .....
        ..... 

        and rest of your map code to initialize map



        });

    }

Answer 6

我建议在检查div是否可见之后加载地图有一些时间延迟将保留地图。试一试！

  $(document).ready(function () {
        $('.togglebtn').click(function () {

 if(!$('#map_canvas').is(':visible')){
                setTimeout(function(){initialize()}, 500);
                }
    });
});


   //your function
 function initialize() {


        var mapOptions = {
            zoom: 3,
          center :  new google.map.LatLng(31.510474,80.352287),
            center: new google.maps.LatLng(44.510474, 50.352287),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

        var contentSC_PAK = "SoftCircles Pakistan";
        .....
        ..... 

        and rest of your map code to initialize map



        });

    }

Answer 7

这个对我不起作用：

jQuery("iframe#headerMap").attr("src", "http://maps.google.com/maps/ms?etc etc....");

...所以我必须找到解决这个问题的另一种方法。

我的问题是我的<div>是display: none，并且在这样的2.5秒之后就会以这种方式显示：

setTimeout(function() {
    $("#contents")
    .css({opacity: 0}).fadeIn()
    .animate({opacity:1}, 1000, function() {
    });
}, 2500);

我希望Google地图能够显示在#contents中，我遇到的问题是红色标记位于左上角。

所以我在页面中添加了<div id="map"></div>。

然后我在名为map.php的php文件中添加了iframe内容，并在下面添加了这个jquery行：

setTimeout(function() {
    $("#map").load('map.php');
}, 2500);

所以它将带有iframe的map.php加载到map id的div中。它运作得很好。

加载时Google地图位置不正确

7 个答案: