Question

我试图用幻灯片切换效果显示谷歌地图，但地图没有完全显示。

css类已经有100％的宽度。如何正确使用调整大小选项？

var map;
function initialize() {
  var mapOptions = {
    zoom: 11,
    center: new google.maps.LatLng(<?php $custom = $this->item->extra_fields; echo $custom[0]->value; ?>, <?php $custom = $this->item->extra_fields; echo $custom[1]->value; ?>),
    mapTypeId: google.maps.MapTypeId.ROADMAP

  };
  map = new google.maps.Map(document.getElementById('map-canvas<?php echo $this->item->id; ?>'),
      mapOptions);

  }

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

jQuery(document).ready(function ($) {
    $('#mostrarmapa<?php echo $this->item->id; ?>').click(function () {

        $('#map-canvas<?php echo $this->item->id; ?>').slideToggle();
        $('#map-canvas<?php echo $this->item->id; ?>').addClass('showmap');
    });
});

google.maps.event.trigger(map, 'resize');

Answer 1

在resize的回调函数中添加地图的slideToggle触发事件。

$('#map-canvas<?php echo $this->item->id; ?>').slideToggle(function(){
    google.maps.event.trigger(map, 'resize');
});

Google地图调整大小不起作用

1 个答案: