2

我正在尝试向我的网站添加两个地图，每个地图都有两个放置图钉。用户可以通过单击选项卡在两个地图之间切换。我使用 Google Maps Engine 构建了这两个地图。第一张地图看起来很棒，放大到合适的数量并显示了两个图钉。但是，第二张地图完全关闭。我尝试按照上一个问题Marker not centering in iframe for google map但 1）它仍然关闭和 2）我无法在地图上添加第二个图钉（而且地图看起来不如iframe 我直接嵌入到网站上）。

这是 JsFiddle：http: //jsfiddle.net/SbH3Y/5/

谷歌地图 iframe：

<iframe src="http://mapsengine.google.com/map/embed?mid=zzFoZgN4yc_E.kT_V1HoEUMHs" width="461" height="350" scrolling='no'  marginheight='0' marginwidth='0'></iframe>

谢谢

4

1 回答 1

7

当它被选中时，您需要在第二个选项卡中重新加载 iframe。最好是当您最初有一个空的 iframe 并src在第一次选择选项卡时设置。

简单地重新加载框架很容易：

  $('#pickup-date2').show(0,function(){         
    $('iframe',this)
      .attr('src','http://mapsengine.google.com/map/embed?mid=zzFoZgN4yc_E.kT_V1HoEUMHs');
  });

http://jsfiddle.net/doktormolle/jUVuB/

但这会在您每次选择选项卡时重新加载 iframe。
更好的方法：

内嵌框架：

<iframe src="about:blank" 
        data-src="http://mapsengine.google.com/map/embed?mid=zzFoZgN4yc_E.kT_V1HoEUMHs" 
        width="461" height="350"></iframe>

如您所见，最初不会加载地图，它src是空白的，地图的 URL 存储在data-src-attribute

剧本：

  $('#pickup-date2')
   .show(0,function(){
      //when the iframe has data-src
      if($('iframe',this).data('src')){
        $('iframe',this)
          //set the src-attribute
          .attr('src',$('iframe',this).data('src'))
            //and set data-src to null,
            //so the iframe will only be reloaded on the first click
            .data('src',null);
      } });

http://jsfiddle.net/doktormolle/tWCUR/

于 2013-09-12T09:00:43.680 回答