Question

我正在尝试使用fancybox为谷歌地图制作一个灯箱。当我单击地图div时它会打开而不是在中心然后它会留下一个不可见的div。当我再次点击同一区域时，它会在中心打开。我只是单击一下就无法弄清楚如何在中心打开它。

HTML

<body>
<div id="fancybutton" value="open fancybox" style="width:200px;height:200px">
    <div id="map_canvas" style="width:100%;height:100%"></div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false">
    </script>
    <script type="text/javascript" src="https://yandex.st/jquery/fancybox/2.1.4/jquery.fancybox.min.js"></script>    
    <link rel="stylesheet" href="https://yandex.st/jquery/fancybox/2.1.4/jquery.fancybox.css" type="text/css" media="screen" />

地图Api

     function initialize() {
          var goo = google.maps,
              mapOptions = {
                  zoom: 14,
                  center: new goo.LatLng(52.5498783, 13.425209099999961),
                  mapTypeId: goo.MapTypeId.ROADMAP,
                  disableDefaultUI:true
              },
              map = new goo.Map(document.getElementById('map_canvas'),
              mapOptions),
              marker = new goo.Marker({
                  map: map,
                  position: map.getCenter()
              });

JQuery

 $('#fancybutton')
              .prop({
              disabled: false
          })
              .click(function () {

              $.fancybox(map.getDiv(),

              {
                  width: 600,
                  height: 400,
                  margin:50,
                  autoSize: false,
                  afterShow: function (a, z) {
                      map.setOptions({
                          disableDefaultUI: false
                      })
                      goo.event.trigger(map, 'resize');
                      map.setCenter(this.content.data('center'));
                  },

                  beforeLoad: function (a) {
                      this.content.data({
                          parent: this.content.parent(),
                          center: map.getCenter()
                      })
                  },

                  beforeClose: function () {
                      this.content.data({
                          center: map.getCenter()
                      })

                  },
                  afterClose: function () {
                      map.setOptions({
                          disableDefaultUI: true
                      })
                      this.content.appendTo(this.content.data('parent')).show();
                      goo.event.trigger(map, 'resize');
                      map.setCenter(this.content.data('center'));
                  }
              });

          });




      }

      google.maps.event.addDomListener(window, 'load', initialize);


</script>

</body>

为什么fancybox需要两次点击来加载谷歌地图

0 个答案: