我正在使用包含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提供的非传感器版本,以避免出现混合内容警告。