Bootstrap布局中Google Map无法在col容器内显示的问题排查与全屏适配方案问询

问题描述 #

我正在开发一个门店定位器，采用左右并列的双栏布局：左侧为国家及地点列表，右侧为基于Google Map JavaScript API实现的地图。我使用Bootstrap构建页面布局，但遇到一个异常问题：当承载地图的div放置在任何父div或section标签内时，地图完全无法加载显示；若将该div直接放置在body标签下，则能正常显示。

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Noble Panacea | Store Locator</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<section class="mapSection">
<div class="container">
<div class="row">
<!-- List Div some content -->
<div class="col-md-3 listHalf">
<h1>SELECT COUNTRY</h1>
<div class="countryCard">....</div>
</div>
<!-- the map div placed inside a bootstrap col-->
<div class="col-md-9">
<h1>Map</h1>
<div id="map"></div>
</div>
</div>
</div>
</section>

地图初始化脚本：

var map;
var markers = [];
var infoWindow;
// Map Styling
const mapStyle = [{
'featureType': 'administrative',
'elementType': 'all',
'stylers': [{
'visibility': 'on',
}, {
'lightness': 33,
}, ],
}, {
'featureType': 'landscape',
'elementType': 'all',
'stylers': [{
'color': '#f2e5d4',
}],
}, {
'featureType': 'poi.park',
'elementType': 'geometry',
'stylers': [{
'color': '#c5dac6',
}],
}, {
'featureType': 'poi.park',
'elementType': 'labels',
'stylers': [{
'visibility': 'on',
}, {
'lightness': 20,
}, ],
}, {
'featureType': 'road',
'elementType': 'all',
'stylers': [{
'lightness': 20,
}],
}, {
'featureType': 'road.highway',
'elementType': 'geometry',
'stylers': [{
'color': '#c5c6c6',
}],
}, {
'featureType': 'road.arterial',
'elementType': 'geometry',
'stylers': [{
'color': '#e4d7c6',
}],
}, {
'featureType': 'road.local',
'elementType': 'geometry',
'stylers': [{
'color': '#fbfaf7',
}],
}, {
'featureType': 'water',
'elementType': 'all',
'stylers': [{
'visibility': 'on',
}, {
'color': '#acbcc9',
}, ],
}];
function initMap() {
// Create the map.
var centerMap = {lat: 52.632469, lng: -1.689423};
const map = new google.maps.Map(document.getElementById("map"), {
center: centerMap,
zoom: 8,
styles: mapStyle,
});
// Load the stores GeoJSON onto the map.
map.data.loadGeoJson('store-data.js', {idPropertyName: 'storeid'});
const apiKey = 'KEYYYYYY';
const infoWindow = new google.maps.InfoWindow({maxWidth:350});
// Define the custom marker icons, using the store's "category".
map.data.setStyle((feature) => {
return {
animation: google.maps.Animation.DROP,
icon: {
url: `marker.png`,
scaledSize: new google.maps.Size(40, 50),
},
};
});
map.data.addListener('mouseover', function(event) {
// Bounce animation on hover
map.data.overrideStyle(event.feature, {animation: google.maps.Animation.BOUNCE});
});
map.data.addListener('click', function(event) {
// Show the information for a store when its marker is hovered.
const category = event.feature.getProperty('category');
const name = event.feature.getProperty('name');
const description = event.feature.getProperty('description');
const hours = event.feature.getProperty('hours');
const phone = event.feature.getProperty('phone');
const logo = event.feature.getProperty('logo');
const position = event.feature.getGeometry().get();
const content = `
<div class="infoBox">
<img class="logo" src="/${logo}">
<p>${description}</p>
<p><b>Open:</b> ${hours}<br/><b>Phone:</b> ${phone}</p>
<p><img src="/Sample.jpg"></p>
</div>
`;
infoWindow.setContent(content);
infoWindow.setPosition(position);
infoWindow.setOptions({pixelOffset: new google.maps.Size(0, -30)});
infoWindow.open(map);
});
map.data.addListener('mouseout', function(event) {
// remove animation on mouseout
map.data.overrideStyle(event.feature, {animation: "none" });
});
};

<script async defer src="https://maps.googleapis.com/maps/api/js?key=KEYYYYY&callback=initMap"></script>

解决方案 #

我碰到过几乎一模一样的问题，大概率是地图容器缺少明确的尺寸设置导致的——Google Maps需要目标div有确定的宽高才能正常渲染。下面是具体的解决步骤和排查方向：

1. 给地图容器添加明确的宽高样式

这是最核心的解决点。Bootstrap的col-md-9默认是宽度100%，但高度是由内容撑开的，而地图初始化时无法识别这种“自适应”高度。你可以在<head>里添加自定义样式：

<style>
#map {
  width: 100%; /* 强制占满父容器宽度 */
  height: 70vh; /* 用视窗高度单位，适配不同屏幕尺寸 */
  min-height: 500px; /* 设置最小高度，避免小屏幕下显示过短 */
}
</style>

2. 检查父容器的overflow属性

有时候自定义样式或第三方插件会给Bootstrap的.row或.col-md-9设置overflow: hidden，导致地图被裁剪。可以临时添加样式排查：

.mapSection .container, .mapSection .row, .col-md-9 {
  overflow: visible !important;
}

如果这样地图能显示了，再调整具体的overflow设置，避免影响其他布局元素。

3. 确保地图初始化时机正确

虽然你的代码已经用了async defer和callback=initMap，但可以尝试把initMap包裹在DOM加载完成的事件里，确保容器已经被渲染：

document.addEventListener('DOMContentLoaded', function() {
  initMap();
});

不过Google Maps的脚本本身会在加载完成后调用initMap，这一步更多是备选排查手段。

4. 排查样式冲突

如果上面的步骤都没用，可以临时移除Bootstrap的CSS链接，测试地图是否显示。如果显示了，说明是Bootstrap的某些样式和地图冲突：

• 检查是否有元素的z-index过低，导致地图被覆盖，可以给#map设置z-index: 1;
• 确认Bootstrap的box-sizing: border-box正常工作（默认已经设置），避免容器尺寸计算异常

内容的提问来源于stack exchange，提问作者Abdallah Al Swaity