- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试在我的网站中实现 Google Maps API,但遗憾的是收效甚微。
我正在使用 bootstrap,大部分 CSS 设置保持不变。
经过一整天的研究和探索,我发现,如果我从代码中删除 bootstrap 的 3 CDN 代码行:
<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 加载完美,但是,当 bootsrap 代码运行时,我看到的只是一个带有 Google 签名的灰色 div。
还有。我发现如果我调整浏览器的大小,那么 map 就会完美加载 - 正如预期的那样。
最后, map 位于选项卡内,五分之一,而且我没有更改选项卡的初始 CSS 设置。
请帮忙,
代码如下:
<!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;
}
最佳答案
这并不是真正的冲突...您只需要在显示相应的 Bootstrap 选项卡后调用 map 调整大小即可。
例如:
$('a[data-toggle="tab"]').on('shown.bs.tab', function () {
// Trigger a map resize
google.maps.event.trigger(map, 'resize');
});
当然,如果您想仅在显示特定选项卡时触发调整大小,您可能需要调整选择器a[data-toggle="tab"]
...
关于javascript - 由于 Bootstrap 和 Google map 之间存在冲突,div 变灰,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37282368/
我正在尝试从一个 map 的 map 的 map 的 map 的 map 的 map 的 map 的 map 的 map 的 map 的 map 的 map 的 map 的 map 的 map 的 m
我是 Haskell 的新手,我认为函数 map map和 map.map在 Haskell 中是一样的。 我的终端给了我两种不同的类型, (map.map) :: (a -> b) -> [[a]
我的目标是创建一个 map 的 map ,这样我就可以通过它的键检索外部 map 的信息,然后通过它们的键访问它的“内部” map 。 但是,当我得到每个内部映射时,我最初创建的映射变成了一个对象,我
如何使用 Java8 编写以下代码? for (Entry> entry : data.entrySet()) { Map value = entry.getValue(); if (valu
我有覆盖整个南非的图片。它们为Tiff格式,并已将坐标嵌入其中。我正在尝试拍摄这些图像(大约20张图像),并将它们用作我的iPhone应用程序中的地图叠加层。我的问题在于(准确地)将地图切成图块。 我
所以我有 2 std::map s >一个是“旧的”,一个是“新的”,我想知道哪些文件被删除了,这样就能够遍历差异并对 shared_ptr 做一些事情。这样的事情可能吗?如何做到? 最佳答案 虽然
是否可以将当前查看的 google.maps.Map 转换为静态图像链接,以便我可以获取图像并将其嵌入到 PDF 中? 我在 map 上添加了一些带有自定义图标的标记,所以我不确定这是否真的可行。 如
你能帮我吗 Java Streams ? 从标题可以看出我需要合并List>>进入Map> . 列表表示为List>>看起来像: [ { "USER_1":{
对于 idAndTags 的第二个条目,内部映射被打乱,但第一个条目则不然 第一次接近! for (Map.Entry> entryOne : idAndTags.entrySet()) {
我将从我的代码开始,因为它应该更容易理解我想要做什么: @function get-color($color, $lightness) { @return map-get(map-get($col
我过去曾在许多网站上使用过 Google map ,但遇到了以前从未遇到过的问题。 map 窗口正在显示,但它只显示左上角的 map 片段,以及之后的任何内容(即使我在周围导航时),右侧也不会加载任何
众所周知,这些 map ,无论是常规街道 map 还是卫星 map ,在中国的特定地区都无法正确排列。那么哪个 map 排列正确,是卫星 map 还是默认街道 map ?一些网站表明卫星 map 是正
在拖尾事件之后,我面临着获取此处 map 中的 map 边界的问题。我需要新的经纬度来在新更改的视口(viewport)中获取一些项目/点。我只是想在拖动结束时获得谷歌地图map.getBounds(
我想做的是通过 ajax API 显示以英国邮政编码为中心的小型 bing 生成 map 。我相信这是可能的;我在 Bing map 文档中找不到如何将英国邮政编码转换为可以插入 map Ajax 控
我有一个 List我想转换成的 e Map>其中外部字符串应为“Name”,内部字符串应为“Domain”。 Name Id Domain e(0) - Emp1, 1, Insuran
我的第 2 部分:https://stackoverflow.com/questions/21780627/c-map-of-maps-typedef-doubts-queries 然后我继续创建 I
是否可以在 1 行中使用 Java8 编写以下所有 null 和空字符串检查? Map> data = new HashMap<>(holdings.rowMap()); Set>> entrySet
我正在审查一个项目的旧代码,并使用 Map 的 Map 的 Map 获得了如下数据结构(3 层 map ): // data structure Map>>> tagTree
这可能是一种不好的做法,但我还没有找到更好的解决方案来解决我的问题。所以我有这张 map // Map>> private Map>> properties; 我想初始化它,这样我就不会得到 Null
我们在 JDK 1.7 中使用 HashMap,我在使用 SonarQube 进行代码审查时遇到了一些问题。 请考虑以下示例: public class SerializationTest imple
我是一名优秀的程序员,十分优秀!