Bootstrap Accordion 中的谷歌地图

Question

我正在尝试在 Bootstrap Accordion 中放置一个 Google 地图。

当我将地图<div id="mapcanvas"> 放入第二个手风琴时，打开第二个手风琴时地图无法正确加载。

$(document).ready(function() {
    $('#map-acc a').click(function (e) {
      e.preventDefault();
      $(this).collapse('show');
      resetMap(map);
    });
});

function resetMap(m) {
    x = m.getZoom(); alert('infunctin');
    c = m.getCenter();
    google.maps.event.trigger(m, 'resize');
    m.setZoom(x);
    m.setCenter(c);
};          

Codepen Link

我做错了什么？

Answer 1

见codepen

此 js 代码将为您工作。 我创建了一个全局地图变量，因为在您的情况下，当您调用时它不可用

reset(map);

js代码

var map;

function gmap() {
    var mapOptions = {
        zoom: 12,
        center: new google.maps.LatLng(13.0827, 80.2707),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('mapcanvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', gmap);

$(document).ready(function() {
    $('#map-acc a').click(function (e) {
      e.preventDefault();
      $(this).collapse('show');
      resetMap(map);
      });           

    function resetMap(m) {
        x = m.getZoom(); 
        c = m.getCenter();
        google.maps.event.trigger(m, 'resize');
        m.setZoom(x);
        m.setCenter(c);
    };
});