由于Bootsrap和谷歌地图之间的冲突导致格雷迪格 [英] Greyed div due to a conflict between Bootsrap and Google Maps
本文介绍了由于Bootsrap和谷歌地图之间的冲突导致格雷迪格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在大部分CSS设置中都使用bootstrap。
我尝试在我的网站上实施Google Maps API， p>
经过一整天的研究和探索后，我发现如果从代码中删除引导程序的3 CDN代码行：
< link rel =stylesheethref =http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css>
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js>< / script>
< script src =http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js>< / script>
谷歌地图加载完美，但是，当靴子代码运行，然后我看到的只是一个灰色的div并附有Google签名。
另外。我发现，如果我调整浏览器的大小，那么地图加载完美 - 如预期的那样。
拉斯维加斯的地图位于一个标签内，五分之一，我没有改变标签的初始CSS设置。
请帮忙，
以下代码：
<！DOCTYPE html>
< html>
< head>
< meta charset =UTF-8>
< meta name =viewportcontent =initial-scale = 1.0>
< title> sys< / title>
< link rel =stylesheethref =http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css>
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js>< / script>
< script src =http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js>< / script>
< link href ='http：//fonts.googleapis.com/earlyaccess/notosans.css'rel ='stylesheet'type ='text / css'>
< link href =includes / styles.css =stylesheettype =text / css>
< link rel =icontype =image / pnghref =includes / icons / favicon.png/>
< script src =http://canvasjs.com/assets/script/canvasjs.min.js>< / script>
< script src =js / ajax.js>< / script>
< script src =js / hideCaseDetailsifVolunteer.js>< / script>
< script>
var map;
函数initMap（）{
map = new google.maps.Map（document.getElementById（'googleMap'），{
center：{lat：-34.397，lng：150.644}，
zoom：8
}）;
函数loadScript（）
{
var script = document.createElement（script）;
script.type =text / javascript;
script.src =http://maps.googleapis.com/maps/api/js?key=AIzaSyAfUA7aWeXe4fxoBE9PzjWRJ3MRlcSaYh0&callback=initMap;
document.body.appendChild（script）;
}
window.onload = loadScript;
< / script>
....
.....
....
....
< div id =menu4class =tab-pane fade>
< div id =map-container>
< div id =googleMapstyle =width：100％; height：400px;>< / div>
< / div>
< / div>
CSS：
@media（max-width：970px）{
.navbar-header {
float：none;
}
.navbar-left，.navbar-right {
float：none！important;
}
.navbar-toggle {
display：block;
}
.navbar-collapse {
border-top：1px solid transparent;
box-shadow：inset 0 1px 0 rgba（255,255,255,0.1）;
}
.navbar-fixed-top {
top：0;
border-width：0 0 1px;
}
.navbar-collapse.collapse {
display：none！important;
}
.navbar-nav {
float：none！important;
margin-top：7.5px;
}
.navbar-nav> li {
float：none;
}
.navbar-nav> li>一个{
padding-top：10px;
padding-bottom：10px;
}
.collapse.in {
display：block！important;
}
}
nav，header，section，footer，article {
display：block;
}
.container {
}
.dropdown-menu> li> a：悬停，.dropdown-menu> li> a：focus {
background-color：＃4CAF50;
}
.navbar-custom .navbar-toggle，.navbar-custom .nav .open> a，.navbar-custom .nav .open> a：悬停，.navbar-custom .nav .open> a：focus {
background-color：＃FFC107;
}
.navbar-custom {
background-color：＃263238;
颜色：#FFFFFF;
border-radius：0;
}
.navbar-custom .navbar-nav> li>一个{
颜色：#fff;
}
.navbar-custom .navbar-nav> .active> a，.navbar-nav> .active> a：悬停，.navbar-nav> .active> a：focus {
color：#ffffff;
background-color：transparent;
}
.navbar-custom .navbar-nav> li> a：悬停，.nav> li> a：focus {
text-decoration：none;
背景颜色：＃FFC107;
}
.navbar-custom .navbar-brand {
color：＃F44336;
}
.navbar-custom .navbar-toggle {
background-color：＃607D8B;
}
.navbar-custom .icon-bar {
background-color：#FFFFFF;
}
.dropdown-menu> li>一个{
颜色：＃515151;
}
.color_position {
color：＃0a8b9b;
font-size：80％;
}
.logo {
position：relative;
bottom：10px;
height：38px;
width：163px;
}
.navbar-collapse {
border-top：0px！important;
box-shadow：none;
}
。右至左{
margin-top：30px;
}
。右至左li {
float：right;
}
.tab-content {
方向：rtl;
}
/ *下面的代码关闭数字输入纺纱器* /
input [type = number] :: - webkit-inner-spin-button，input [type = number] :: - webkit-outer-spin-button {
-webkit-appearance：none;
保证金：0;
}
.panel-group {
margin：0 auto;
width：80％/ *您选择的值适合您的路线* /
}
#tip {
background-image：url（images / tip1.png）;
height：64px;
width：260px;
}
#birthday {
background-image：url（images / birthdays1.png）;
height：64px;
width：260px;
}
＃whatsnew {
background-image：url（images / whatsnew.png）;
height：64px;
width：260px;
}
#importantphones {
background-image：url（images / importantphones.png）;
height：64px;
width：260px;
}
.turn {
float：right;
}
.lil {
float：right;
}
#chartContainer {
width：500px;
方向：ltr;
}
.buttonn {
margin：10px;
}
/ *יצירתפנייה* /
textarea {
resize：none;
}
.heading
{
text-align：center;
margin：5px;
font-size：15px;
颜色：蓝色;
}
#select_box
{
width：350px;
背景颜色：＃819FF7;
padding：10px;
height：375px;
border-radius：5px;
box-shadow：0px 0px 10px 0px grey;
}
选择
{
width：329px;
height：35px;
border：1px solid #BDBDBD;
margin-top：20px;
padding：2px;
font-size：15px;
颜色：灰色;
border-radius：5px;
}
.clear {
clear：both;
}
解决方案
这不是真正的冲突。 ..你只需要在显示相应的bootstrap选项卡后调用地图大小。
例如：
< （'shown.bs.tab'，function（）{
/ $（'a [data-toggle =tab]'）。 /触发地图大小
google.maps.event.trigger（map，'resize'）;
}）;
当然，您可能希望调整选择器 a [data-toggle =tab] 如果只有在显示特定标签时才触发调整大小...
I'm trying to implement Google Maps API in my website, unfortunately with little success.
I am using bootstrap with most of the CSS settings untouched.
After a whole day of researching and exploring I found out that, if I remove the 3 CDN codeline of bootstrap from my code:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Google map loads perfectly, BUT, when the bootsrap code is running then all I see is a greyed div with the Google signature in it.
Also. I found out that If I resize the browser then the map loads perfectly - as expected.
Las thing, the map is inside a tab, one out of five and I didn't change the initial CSS settings for the tabs.
Please help,
Code below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0">
<title>sys</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href='http://fonts.googleapis.com/earlyaccess/notosans.css' rel='stylesheet' type='text/css'>
<link href="includes/styles.css" rel="stylesheet" type="text/css">
<link rel="icon" type="image/png" href="includes/icons/favicon.png" />
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="js/ajax.js"></script>
<script src="js/hideCaseDetailsifVolunteer.js"></script>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('googleMap'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
function loadScript()
{
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyAfUA7aWeXe4fxoBE9PzjWRJ3MRlcSaYh0&callback=initMap";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
....
.....
....
....
<div id="menu4" class="tab-pane fade">
<div id="map-container">
<div id="googleMap" style="width:100%;height:400px;"></div>
</div>
</div>
CSS:
@media (max-width: 970px) {
.navbar-header {
float: none;
}
.navbar-left, .navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none !important;
}
.navbar-nav {
float: none !important;
margin-top: 7.5px;
}
.navbar-nav > li {
float: none;
}
.navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in {
display: block !important;
}
}
nav, header, section, footer, article {
display: block;
}
.container {
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
background-color: #4CAF50;
}
.navbar-custom .navbar-toggle, .navbar-custom .nav .open > a, .navbar-custom .nav .open > a:hover, .navbar-custom .nav .open > a:focus {
background-color: #FFC107;
}
.navbar-custom {
background-color: #263238;
color: #FFFFFF;
border-radius: 0;
}
.navbar-custom .navbar-nav > li > a {
color: #fff;
}
.navbar-custom .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus {
color: #ffffff;
background-color: transparent;
}
.navbar-custom .navbar-nav > li > a:hover, .nav > li > a:focus {
text-decoration: none;
background-color: #FFC107;
}
.navbar-custom .navbar-brand {
color: #F44336;
}
.navbar-custom .navbar-toggle {
background-color: #607D8B;
}
.navbar-custom .icon-bar {
background-color: #FFFFFF;
}
.dropdown-menu > li > a {
color: #515151;
}
.color_position {
color: #0a8b9b;
font-size: 80%;
}
.logo {
position: relative;
bottom: 10px;
height: 38px;
width: 163px;
}
.navbar-collapse {
border-top: 0px !important;
box-shadow: none;
}
.right-to-left {
margin-top: 30px;
}
.right-to-left li {
float: right;
}
.tab-content {
direction: rtl;
}
/* Code below Turns Off Number Input Spinners*/
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.panel-group {
margin: 0 auto;
width: 80% /* value of your choice which suits your alignment */
}
#tip {
background-image: url(images/tip1.png);
height: 64px;
width: 260px;
}
#birthday {
background-image: url(images/birthdays1.png);
height: 64px;
width: 260px;
}
#whatsnew {
background-image: url(images/whatsnew.png);
height: 64px;
width: 260px;
}
#importantphones {
background-image: url(images/importantphones.png);
height: 64px;
width: 260px;
}
.turn {
float: right;
}
.lil {
float: right;
}
#chartContainer {
width:500px;
direction: ltr;
}
.buttonn{
margin:10px;
}
/*יצירת פנייה*/
textarea{
resize:none;
}
.heading
{
text-align:center;
margin:5px;
font-size:15px;
color:blue;
}
#select_box
{
width:350px;
background-color:#819FF7;
padding:10px;
height:375px;
border-radius:5px;
box-shadow:0px 0px 10px 0px grey;
}
select
{
width:329px;
height:35px;
border:1px solid #BDBDBD;
margin-top:20px;
padding:2px;
font-size:15px;
color:grey;
border-radius:5px;
}
.clear {
clear: both;
}
解决方案
That's not really a conflict... You just need to call a map resize after the corresponding bootstrap tab has been shown.
For example:
$('a[data-toggle="tab"]').on('shown.bs.tab', function () {
// Trigger a map resize
google.maps.event.trigger(map, 'resize');
});
Of course, you might want to adapt the selector a[data-toggle="tab"] if you want to trigger the resize only when a specific tab is shown...
Bootstrap tab events documentation
这篇关于由于Bootsrap和谷歌地图之间的冲突导致格雷迪格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
