我正在尝试创建一个商店定位器，它由两部分并排组成，一部分用于国家和地点列表（左），另一部分用于谷歌Map（使用谷歌Mapjavascript api）。
我正在使用bootstrap创建布局，但是，我面临一个奇怪的问题，map div不会显示它是否放置在任何父div或section中（如果它位于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">....
-->
<!-- the map div placed inside a bootstrap col-->
<div class="col-md-9">
<h1>Map</h1>
<div id="map"></div>
</div>
</div>
</div>
</section>上面只显示列表部分，而Map根本不加载。
如果我将id=map div移到col div之外，它将正常显示。
启动Map的api脚本如下所示：
<!-- Main App -->
<script>
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>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=KEYYYYY&callback=initMap">
</script>有没有一种方法可以将谷歌Map显示在div中，并使其始终覆盖整个div的宽度？
1条答案
按热度按时间xtfmy6hx1#
相关问题：
谷歌Map刷新灰色
gmaps api在本地主机中不工作
从第一个问题开始：
确保显示Map的div具有有效的大小，如果它是隐藏的，则其大小将为零，并且您需要在其具有有效大小之前显示div。如果使用百分比调整大小，请确保其所有父元素都具有百分比大小或特定大小（有关详细信息，请参阅mike williams的google maps api v2教程）。
你的Map没有大小。
显示Map的概念验证代码片段：
（您可能需要调整css以使布局正常工作）