javascript - 将谷歌地图放在 col div 中
问题描述
我正在尝试创建一个商店定位器,它由 2 个部分并排组成,一个用于国家和位置列表(左),另一个用于 Google Map(使用 Google Map Javascript API)。
我正在使用 Bootstrap 创建布局,但是,我遇到了一个奇怪的问题,即如果将地图 div 放置在任何父 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">....
-->
<!-- the map div placed inside a bootstrap col-->
<div class="col-md-9">
<h1>Map</h1>
<div id="map"></div>
</div>
</div>
</div>
</section>
以上仅显示列表部分,而地图根本不加载。
如果我将 id=map div 移到 col div 之外,它将正常显示。
启动地图的 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>
有没有办法在 div 中显示该谷歌地图,并使其始终覆盖它的整个宽度?
解决方案
相关问题:
从第一个问题开始:
确保显示地图的 div 具有有效的大小,如果它被隐藏,它将具有零大小,您需要先显示 div,然后它才会具有有效的大小。如果使用百分比调整大小,请确保其所有父元素都具有百分比大小或特定大小(有关详细信息,请参阅 Mike Williams 的 Google Maps API v2 教程)。
您的地图没有尺寸。
显示地图的概念验证代码片段:(
您可能需要调整 CSS 以使您的布局正常工作)
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"
});
});
};
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<!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" style="height:100%">
<div class="container" style="height:100%">
<div class="row" style="height:100%">
<!-- 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" style="height:100%">
<h1>Map</h1>
<div id="map"></div>
</div>
</div>
</div>
</section>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
</body>
</html>
推荐阅读
- excel - Excel:IF/OR 语句中的乘数
- git - 在一个 github 存储库中存储多个 git 存储库
- ssis - 需要 TLS 的 SSIS 脚本任务 WebRequest
- python - 无法将'bytes'对象隐式转换为str python
- javascript - 使用用户脚本每 3 秒单击一次播放按钮 - Js
- python - 将 Kubernetes Python 客户端与 v2 Docker 注册表一起使用
- python-3.x - Dataflow 无法将消息从 PubSub 推送到 BigQuery
- sql - 如何为每个新列值连续添加常量值?
- computer-vision - 使用openCv3进行立体校准后的图像校正
- sql - 有没有办法不在 select 子句中重复这个子查询?SQL 服务器