问题：
将Google地图放在col div中
华恩
我试图创建一个商店定位器，由并排的两个部分组成，一个用于国家和位置列表（左），另一个用于谷歌地图（使用谷歌地图Javascript API）。
我使用Bootstrap来创建布局，但是，我面临一个奇怪的问题，映射div不会显示它是否放置在任何父div或部分（如果它在body标记下，它正常工作）。
这是我正在使用的代码；
超文本标记语言：
<!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的宽度？
共有1个答案
萧宣
相关问题：
- 谷歌地图刷新灰色
从第一个问题开始：
确保显示地图的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>
类似资料：
-
问题内容： 我们正在构建一个使用google maps api的应用程序。 我有MapController和MapView，并使用以下命令启用了内置的缩放控件： 我现在想在用户实际放大地图时得到一个事件，我该如何处理？我找不到能检测到缩放级别变化的此类事件或任何常规事件。 更新资料 mapView.getZoomControls（）已弃用。并且文档建议改用mapView.setBuiltInZoo
-
一、本功能说明 生成全站内容的地图索引，以便搜索引擎快速准确的收率网站信息 二、功能详解 1.生成地图 1).如何进入本功能 导航栏 选择扩展 -> 菜单栏 选择 Baibu/Google地图 2).界面解释 点击后显示如下界面 名词解释 Sitemaps： Sitemaps 服务旨在使用 Feed 文件 sitemap.xml 通知 Google、Yahoo! 以及 Microsoft 等 Cr
-
问题内容： 有什么办法可以将整个对象放到像这样的对象中： 而不是传递像这样的键值对： 问题答案： 我已经在Map接口方法上进行了搜索，但是没有方法接受一个条目并将其放入地图中。因此，我自己使用一点继承和Java 8接口来实现它。 的接口仅仅是一个扩展的接口通过添加一种以上的方法，该接口。除了仅定义方法外，还对默认实现进行了编码。这样做，我们现在可以通过定义一个新的实现接口的类并扩展我们选择的map
-
我正在开发一个使用Zomato Api获取附近餐馆的应用程序。我有一个片段，它向用户显示了所单击餐厅的详细信息。我的目标是在地图上显示餐厅的位置，但我很难做到这一点，因为我会出错。它只在活动中起作用吗？我是否必须将层次结构更改为FragmentActivity？ 我得到的错误是：
-
我正在一个WordPress网站上工作，作者通常会在大多数帖子中使用iFrames嵌入Google地图。 有没有办法使用Javascript通过鼠标滚轮禁用所有这些缩放？
-
我在下面声明std： map： 但是我有很多错误，比如： 错误16错误C2676：二进制' 我做错了什么？