* {
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#map {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.loadinggif {
width: 50px;
height: 50px;
position: fixed;
left: 50%;
bottom: 50%;
margin-left: -25px;
margin-top: -25px;
z-index: 99;
}
.gm-style-mtc {
display: none;
}
.gmnoprint {
display: none !important;
}
.gmnoprint.gm-bundled-control.gm-bundled-control-on-bottom {
display: none;
}
.gm-control-active.gm-fullscreen-control {
display: none;
}
[class^="https://maps.google.com/maps"] {
display: none !important;
}
.tabs {
width: 60%;
height: 40px;
margin-left: 20%;
position: fixed;
left: 0;
top: 20px;
display: flex;
align-items: center;
justify-content: space-around;
z-index: 100;
}
.tabs div {
width: 100px;
height: 40px;
font-size: 18px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
border-radius: 20px;
position: relative;
color: #666;
}
.tabs .active span {
position: relative;
font-size: 20px;
font-weight: bold;
color: #333;
}
.tabs .active span ::after {
content: '';
width: 20px;
height: 5px;
background-color: saddlebrown;
position: absolute;
left: 20px;
bottom: 10px;
}
.tabs-left {}
.tabs-right {}
/* 动画 */
.loader {
position: fixed;
z-index: 99;
border: 8px solid #f3f3f3;
border-top: 8px solid #ea4335;
border-radius: 50%;
width: 45px;
height: 45px;
animation: spin 2s linear infinite;
position: absolute;
top: 50%;
left: 50%;
margin-left: -30px;
margin-top: -30px;
transform: translate(-50%, -50%);
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* end */
/* 地图信息窗口样式 */
.textoverflow {
width: 100%;
line-height: 23px;
}
.imgs {
width: 100%;
height: auto;
max-height: 150px;
}
.infoWindow-title {
width: 100%;
font-size: 16px;
font-weight: 600;
line-height: 22px;
}
/* end */
#slider {
width: 96%;
margin-left: 2%;
background-color: #fff;
position: fixed;
left: 0;
bottom: 10px;
z-index: 100;
border-radius: 6px;
padding: 20px 15px;
box-sizing: border-box;
}
.slider-title {
width: 100%;
font-size: 15px;
font-weight: 500;
}
.slider-box {
width: 100%;
padding: 0 10p x 0 0;
box-sizing: border-box;
margin-top: 20px;
display: flex;
align-items: center;
}
.slider-btn {
width: 100%;
height: 40px;
color: #fff;
background-color: darkcyan;
font-size: 15px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
margin-top: 30px;
}
.custom-button {
width: 26px;
color: #fff;
font-size: 12px;
font-weight: 500;
line-height: 25px;
text-align: center;
background-color: darkcyan;
border-radius: 100px;
}
#search-box {
height: 30px;
width: 93%;
position: fixed;
padding: 5px;
font-size: 16px;
border-radius: 4px;
border: 1px solid #ccc;
box-shadow: 0px 1px 3px #ddd;
left: 2%;
top: 80px;
font-size: 12px;
}
/* 定位图标 */
.pos {
width: 36px;
height: 36px;
position: fixed;
right: 10px;
bottom: 250px;
z-index: 100;
padding: 6px;
box-sizing: border-box;
border-radius: 5px;
background-color: #fff;
}
.citys {
width: 96%;
position: fixed;
font-size: 16px;
left: 2%;
top: 130px;
font-size: 12px;
background-color: #fff;
padding: 5px 10px;
box-sizing: border-box;
border-radius: 5px;
}