我有一个奇怪的问题,或者至少对我来说有点奇怪。当我设置我的#map div并设置位置:fixed(因为我需要它作为背景)时,它会自动将位置设置为relative并覆盖我的设置。我无法弄清楚在哪里改变这种行为。
父类:
.wrapper {
margin: 0;
padding: 0;
height: 100vh;
z-index: 1;
display: flex;
}
和#map
#map {
height: 100%;
width: 100vw;
overflow: hidden;
z-index: 0;
top: 0;
left: 0;
position: fixed;
代码很简单:
<div class="wrapper">
<div id="map"></div>
<div class="entries container">
{% with 940 as width %}{% placeholder content %}{% endwith %}
</p>
</div>
</div>
现在,当我进入页面时,它首先渲染得很好,并且在使用js之后,js的应用我假设#map div添加了这些行
element.style {
position: relative;
overflow: hidden;
}
好吧,如果我手动更改它,它完全符合我的要求,但我无法禁用此覆盖。还有其他人有这样的事吗?我有点卡住了。
我使用Chrome。
提前感谢您的时间! 此致
JS档案:
var map;
function initialize() {
var v = {lat: 4.00, lng: 7.00};
var marker = new google.maps.Marker({
position: v,
map: map,
title: 'V!'
});
var styleArray = [
{
"featureType": "all",
"elementType": "all",
"stylers": [
{
"hue": "#ff0000"
},
{
"saturation": -100
},
{
"lightness": -30
}
]
},
{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#353535"
}
]
},
{
"featureType": "landscape",
"elementType": "geometry",
"stylers": [
{
"color": "#656565"
}
]
},
{
"featureType": "poi",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#505050"
}
]
},
{
"featureType": "poi",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#808080"
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"color": "#454545"
}
]
}
];
var mapOptions = {
center: new google.maps.LatLng(47.295065, 7.937821),
zoom: 14,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
},
disableDoubleClickZoom: false,
mapTypeControl: false,
scaleControl: false,
scrollwheel: false,
panControl: false,
streetViewControl: false,
draggable: false,
overviewMapControl: false,
overviewMapControlOptions: {
opened: false,
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: styleArray
};
map = new google.maps.Map(document.getElementById("map"),
mapOptions);
var locations = [
['V', 'undefined', 'undefined', 'undefined', 'undefined', 4.0, 7.0, 'https://mapbuildr.com/assets/img/markers/hollow-pin-red.png']
];
for (i = 0; i < locations.length; i++) {
if (locations[i][1] == 'undefined') {
description = '';
} else {
description = locations[i][1];
}
if (locations[i][2] == 'undefined') {
telephone = '';
} else {
telephone = locations[i][2];
}
if (locations[i][3] == 'undefined') {
email = '';
} else {
email = locations[i][3];
}
if (locations[i][4] == 'undefined') {
web = '';
} else {
web = locations[i][4];
}
if (locations[i][7] == 'undefined') {
markericon = '';
} else {
markericon = locations[i][7];
}
marker = new google.maps.Marker({
icon: markericon,
position: new google.maps.LatLng(locations[i][5], locations[i][6]),
map: map,
title: locations[i][0],
desc: description,
tel: telephone,
email: email,
web: web
});
link = '';
}
map.panBy(0, 200);
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function () {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
答案 0 :(得分:2)
尝试将!important添加到position:fixed
属性中。如果这不起作用,则在map.panBy(0,200)
之后以及map.setCenter(center);
$("#map").css("position","fixed !important");
希望这有帮助。
答案 1 :(得分:0)
在我的情况下,使用Google Map API并使用jQuery显示地图时也发生了同样的情况。就我而言,我使用CSS进行了如下修复:
#map
{
position: fixed !important;
height: 100% !important;
width: 100% !important;
}
显示地图的div元素如下:
<div id="map"></div>