我正在使用包含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

我究竟做错了什么?

最佳答案

更新了小提琴以回答您的可见问题: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提供的非传感器版本,以避免出现混合内容警告。

10-05 20:55
查看更多