Question

我正在尝试在Bootstrap手风琴中放置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 code

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);
    };
});

Bootstrap Accordion中的谷歌地图

1 个答案: