Question

我使用jQuery UI创建了一个jQuery手风琴。

有三个窗格，每个窗格都有一张Google地图。

第一个窗格的地图正确加载，但第二个和第三个窗格的地图无法正确加载。

根据其他StackOverflow线程的建议，我决定在激活窗格时调用map resize和centering函数。

    $(document).ready(function(){
        $('.the-map').each(function(){
                render_map( $(this) );
        });
        $(function() {
            $("#contact-maps").accordion({
                 collapsible:true,
                 activate:function (event, ui){
                        google.maps.event.trigger(map, "resize");
                        center_map( map );
                        }
                      });
               });
})(jQuery);

但是，调整大小和居中功能仅适用于最后（第三个）窗格而不适用于第二个窗格。

更新：以下是jsFiddle：http://jsfiddle.net/360sb2bc/

我错过了什么？

Answer 1

您只在其中一个地图对象上调用google.maps.trigger(map,'resize')。

working fiddle（创建一个map个对象数组，并在手风琴改变时调用所有这些对象的调整大小）

代码段：

＆＃13;

(function($) {

  /*
   *  render_map
   *
   *  This function will render a Google Map onto the selected jQuery element
   *
   *  @type	function
   *  @date	8/11/2013
   *  @since	4.3.0
   *
   *  @param	$el (jQuery element)
   *  @return	n/a
   */
  var map;

  function render_map($el) {

    // var
    var $markers = $el.find('.marker');

    // vars
    var args = {
      zoom: 16,
      center: new google.maps.LatLng(0, 0),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // create map	        	
    map = new google.maps.Map($el[0], args);

    // add a markers reference
    map.markers = [];

    // add markers
    $markers.each(function() {

      add_marker($(this), map);

    });

    // center map
    center_map(map);
    return map;
  }

  /*
   *  add_marker
   *
   *  This function will add a marker to the selected Google Map
   *
   *  @type	function
   *  @date	8/11/2013
   *  @since	4.3.0
   *
   *  @param	$marker (jQuery element)
   *  @param	map (Google Map object)
   *  @return	n/a
   */

  function add_marker($marker, map) {

    // var
    var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng'));

    // create marker
    var marker = new google.maps.Marker({
      position: latlng,
      map: map
    });

    // add to array
    map.markers.push(marker);

    // if marker contains HTML, add it to an infoWindow
    if ($marker.html()) {
      // create info window
      var infowindow = new google.maps.InfoWindow({
        content: $marker.html()
      });

      // show info window when marker is clicked
      google.maps.event.addListener(marker, 'click', function() {

        infowindow.open(map, marker);

      });
    }

  }

  /*
   *  center_map
   *
   *  This function will center the map, showing all markers attached to this map
   *
   *  @type	function
   *  @date	8/11/2013
   *  @since	4.3.0
   *
   *  @param	map (Google Map object)
   *  @return	n/a
   */

  function center_map(map) {

    // vars
    var bounds = new google.maps.LatLngBounds();

    // loop through all markers and create bounds
    $.each(map.markers, function(i, marker) {

      var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng());

      bounds.extend(latlng);

    });

    // only 1 marker?
    if (map.markers.length == 1) {
      // set center of map
      map.setCenter(map.markers[0].getPosition());
      map.setZoom(4);
    } else {
      // fit to bounds
      map.fitBounds(bounds);
    }

  }

  /*
   *  document ready
   *
   *  This function will render each map when the document is ready (page has loaded)
   *
   *  @type	function
   *  @date	8/11/2013
   *  @since	5.0.0
   *
   *  @param	n/a
   *  @return	n/a
   */

  $(document).ready(function() {
    var maps = [];
    $('.map').each(function(i, val) {
      console.log(i + " ,val:" + val);
      maps.push(render_map($(this)));
    });
    $(function() {
      $("#contact").accordion({
        collapsible: true,
        activate: function(event, ui) {
          for (var i = 0; i < maps.length; i++) {
            google.maps.event.trigger(maps[i], "resize");
            center_map(maps[i]);
          }
        }
      });
    });
  });
})(jQuery);

＆＃13;

.map {
  width: 400px;
  height: 400px;
  border: #ccc solid 1px;
  margin: 0px 0;
}
#contact {
  width: 60%;
  padding-right: 1em;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<div class="contact" id="contact">
  <h3>Map One</h3>

  <div>
    <div class="map">
      <div class="marker" data-lat="74.2" data-lng="67.7"></div>
    </div>
  </div>
  <h3>Map Two</h3>

  <div>
    <div class="map">
      <div class="marker" data-lat="33.2" data-lng="94.7"></div>
    </div>
  </div>
  <h3>Map Three</h3>

  <div>
    <div class="map">
      <div class="marker" data-lat="38.2" data-lng="17.7"></div>
    </div>
  </div>

</div>

＆＃13;

jQuery Accordion和Google Maps Resizing：只有最后一个窗格的地图有效

1 个答案: