javascript - 谷歌地图在自举 Accordion 中不起作用

Question

我正在使用包含 Google Map API 的 bootstrap accordion，但 map 没有展示。我已经尝试过调整 map 大小的方法，但它仍然不起作用，这是我的代码。

html:

<a class="map-button" data-toggle="collapse" data-target="#map">View Map</a>

<div id="map" class="collapse ">
    <div id="google-map" data-latitude="3.1234" data-longitude="101.1234"></div>
  </div>

CSS:

.map-button{
  width:100%;
  display:block;
  height: auto;
  text-align: center;
  font-size: 20px;
  cursor: pointer;
  color:#fff;
  padding:30px 0px;
  font-weight:600;
  transition: all 0.7s;
  -webkit-transition: all 0.7s; 
 }

 #google-map {
 height: 350px;
 width:100%;
 }

map 脚本:

//Google Map
var latitude = $('#google-map').data('latitude')
var longitude = $('#google-map').data('longitude')
function initialize_map() {
    var myLatlng = new google.maps.LatLng(latitude,longitude);
    var mapOptions = {
        zoom: 14,
        scrollwheel: false,
        disableDefaultUI: true,
        center: myLatlng
    };
    var map = new google.maps.Map(document.getElementById('google-map'), mapOptions);
    var contentString = '';
    var infowindow = new google.maps.InfoWindow({
        content: '<div class="map-content"><ul class="address">' + $('.address').html() + '</ul></div>'
    });
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
}
google.maps.event.addDomListener(window, 'load', initialize_map);
google.maps.event.addDomListener(window, 'resize', function() {
 var center = map.getCenter();
 google.maps.event.trigger(map, "resize");
 map.setCenter(center); 
});

Fiddle

我做错了什么？

Answer 1

更新了您的 fiddle 以回答您在此处可见的问题:https://jsfiddle.net/4gLaobzh/

相关变化如下:

替换:

google.maps.event.addDomListener(window, 'load', initialize_map);
google.maps.event.addDomListener(window, 'resize', function() {
  var center = map.getCenter();
  google.maps.event.trigger(map, "resize");
  map.setCenter(center); 
});

与:

initialize_map();
$('#map').on('hidden.bs.collapse', function () {
  initialize_map();
})
$('#map').on('shown.bs.collapse', function () {
  initialize_map(); 
})

从本质上讲，问题是您收听了错误的事件。只有当浏览器窗口发生变化时才会触发窗口调整大小，而不仅仅是其中包含的 div。相反，我将 map 实例化连接到 Accordion 的展开和折叠事件中/请注意，这些函数只会从 Bootstrap 版本 3 及更高版本触发，对于较低版本使用:

$('#map').on('hidden', function () {
  initialize_map();
})
$('#map').on('shown', function () {
  initialize_map(); 
})

编辑:您还两次包含 map 库。删除了通过 http 提供的非传感器版本以避免混合内容警告。