谷歌地图与花式框

时间：2016-01-02 05:18:17

标签： jquery html google-maps fancybox

请看我的小提琴位置。

http://jsfiddle.net/TECM4/231/ 

<div class="iframe_sec" style="height:160px;">
<a id="fancybutton" class="fancybox"><div id="map_canvas" style="height:100%; width: 100%;"></div></a>
</div>

如果我们点击地图，弹出窗口将会打开。但我不能点击弹出内部。如果我单击弹出窗口将关闭。是什么原因？？我该如何解决这个问题？

代码段（来自链接小提琴）： 

function initialize() {
  var goo = google.maps
  var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 10,
    center: new google.maps.LatLng(-33.92, 151.25)
  });
  var locations = [
    ['Gautham Beach', -33.92, 151.25]
  ];
  var infowindow = new google.maps.InfoWindow();
  var marker, i;
  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      icon: 'http://maps.google.com/mapfiles/ms/icons/purple-dot.png',
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map
    });
    google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, i));
    google.maps.event.addListener(marker, 'mouseout', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.close(map, marker);
      }
    })(marker, i));
    /* in reponsive plave the map pointer in center */
    $(window).on('resize', function() {
      var currCenter = map.getCenter();
      google.maps.event.trigger(map, 'resize');
      map.setCenter(currCenter);
    })
  }
  $('#fancybutton')
    .prop({
      disabled: false
    })
    .click(function() {
      $.fancybox(map.getDiv(), {
        openEffect: 'elastic',
        openSpeed: 150,

        closeEffect: 'elastic',
        closeSpeed: 150,

        closeClick: true,
        width: 600,
        height: 400,
        margin: 50,
        autoSize: true,
        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);
.fancybox-skin {
  position: relative;
  background: #f9f9f9;
  color: #444;
  text-shadow: none;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  height: 100%!important;
  width: 97.5%!important;
}
.fancybox-opened {
  z-index: 8030;
  width: 1170px!important;
  height: 490px!important;
}
.fancybox-outer,
.fancybox-inner {
  position: relative;
  height: 100%!important;
}
.fancybox-inner {
  overflow: hidden;
  width: 100%!important;
  height: 100%!important;
}
.fancybox-image,
.fancybox-iframe {
  display: block;
  width: 100%;
  height: 100%;
}
.fancybox-image {
  max-width: 100%;
  max-height: 100%;
}
@media only screen and (max-width: 1200px) {
  .fancybox-opened {
    width: 81%!important;
    margin: auto;
    left: 0!important;
    right: 0!important;
  }
}
@media only screen and (max-width: 500px) {
  .fancybox-opened {
    width: 78%!important;
    margin: auto;
    left: 0!important;
    right: 0!important;
  }
}
@media only screen and (max-width: 420px) {
  .fancybox-opened {
    padding: 10px;
    box-shadow: rgba(0, 0, 0, 0.498039) 0px 10px 25px;
    background: rgb(255, 255, 255);
    height: 80vh!important;
  }
  .fancybox-opened .fancybox-skin {
    width: 100%!important;
    height: 100%!important;
    padding: 0!important;
    box-shadow: none;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<link href="http://yandex.st/jquery/fancybox/2.1.4/jquery.fancybox.css" rel="stylesheet" />
<script src="http://yandex.st/jquery/fancybox/2.1.4/jquery.fancybox.min.js"></script>
<div class="iframe_sec" style="height:200px; width: 200px;">
  <a id="fancybutton" class="fancybox">
    <div id="map_canvas" style="height:100%; width: 100%;"></div>
  </a>
</div>

1 个答案:

答案 0 :(得分：2)

您必须将closeClick设为false

代码closeClick : false,

中的第67行

FIDDLE： http://jsfiddle.net/TECM4/232/

代码段（来自链接小提琴）：

function initialize() {
  var goo = google.maps
  var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 10,
    center: new google.maps.LatLng(-33.92, 151.25)
  });
  var locations = [
    ['Gautham Beach', -33.92, 151.25]
  ];
  var infowindow = new google.maps.InfoWindow();
  var marker, i;
  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      icon: 'http://maps.google.com/mapfiles/ms/icons/purple-dot.png',
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map
    });
    google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, i));
    google.maps.event.addListener(marker, 'mouseout', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.close(map, marker);
      }
    })(marker, i));
    /* in reponsive plave the map pointer in center */
    $(window).on('resize', function() {
      var currCenter = map.getCenter();
      google.maps.event.trigger(map, 'resize');
      map.setCenter(currCenter);
    })
  }
  $('#fancybutton')
    .prop({
      disabled: false
    })
    .click(function() {
      $.fancybox(map.getDiv(), {
        openEffect: 'elastic',
        openSpeed: 150,

        closeEffect: 'elastic',
        closeSpeed: 150,

        closeClick: false,
        width: 600,
        height: 400,
        margin: 50,
        autoSize: true,
        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);
.fancybox-skin {
  position: relative;
  background: #f9f9f9;
  color: #444;
  text-shadow: none;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  height: 100%!important;
  width: 97.5%!important;
}
.fancybox-opened {
  z-index: 8030;
  width: 1170px!important;
  height: 490px!important;
}
.fancybox-outer,
.fancybox-inner {
  position: relative;
  height: 100%!important;
}
.fancybox-inner {
  overflow: hidden;
  width: 100%!important;
  height: 100%!important;
}
.fancybox-image,
.fancybox-iframe {
  display: block;
  width: 100%;
  height: 100%;
}
.fancybox-image {
  max-width: 100%;
  max-height: 100%;
}
@media only screen and (max-width: 1200px) {
  .fancybox-opened {
    width: 81%!important;
    margin: auto;
    left: 0!important;
    right: 0!important;
  }
}
@media only screen and (max-width: 500px) {
  .fancybox-opened {
    width: 78%!important;
    margin: auto;
    left: 0!important;
    right: 0!important;
  }
}
@media only screen and (max-width: 420px) {
  .fancybox-opened {
    padding: 10px;
    box-shadow: rgba(0, 0, 0, 0.498039) 0px 10px 25px;
    background: rgb(255, 255, 255);
    height: 80vh!important;
  }
  .fancybox-opened .fancybox-skin {
    width: 100%!important;
    height: 100%!important;
    padding: 0!important;
    box-shadow: none;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<link href="http://yandex.st/jquery/fancybox/2.1.4/jquery.fancybox.css" rel="stylesheet" />
<script src="http://yandex.st/jquery/fancybox/2.1.4/jquery.fancybox.min.js"></script>
<div class="iframe_sec" style="height:160px;">
  <a id="fancybutton" class="fancybox">
    <div id="map_canvas" style="height:100%; width: 100%;"></div>
  </a>
</div>

相关问题
最新问题