Javascript 谷歌地图自动设置位置：相对的#地图div

我有一个奇怪的问题，至少对我来说有点奇怪。当我设置#map div的样式并设置位置：fixed（因为我需要它作为背景）时，它会自动将位置设置为relative并覆盖我的设置。我不知道该在哪里改变这种行为

父类：

.wrapper {
  margin: 0;
  padding: 0;
  height: 100vh;
  z-index: 1;
  display: flex;
}

还有#地图

代码很简单：

<div class="wrapper">
       <div id="map"></div>
        <div class="entries container">
            {% with 940 as width %}{% placeholder content %}{% endwith %}
            </p>
        </div>
    </div>

如果我手动更改它，它会完全按照我的要求执行，但我不能禁用此覆盖。还有谁经历过这样的事情吗？我有点卡住了

我用铬

提前感谢您的时间！ 问候

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);

});

var映射；
函数初始化（）{
var v={lat:4.00，lng:7.00}；
var marker=new google.maps.marker({
职位：v，
地图：地图，
标题：“V！”
});
var styleArray=[
{
“featureType”：“全部”，
“elementType”：“全部”，
“造型师”：[
{
“色调”：“ff0000”
},
{
“饱和”：-100
},
{
“亮度”：-30
}
]
},
{
“featureType”：“全部”，
“elementType”：“labels.text.fill”，
“造型师”：[
{
“颜色”：“#ffffff”
}
]
},
{
“featureType”：“全部”，
“elementType”：“labels.text.stroke”，
“造型师”：[
{
“颜色”：“#3535”
}
]
},
{
“特色类型”：“景观”，
“elementType”：“几何体”，
“造型师”：[
{
“颜色”：“#6565”
}
]
},
{
“featureType”：“poi”，
“elementType”：“geometry.fill”，
“造型师”：[
{
“颜色”：“505050”
}
]
},
{
“featureType”：“poi”，
“elementType”：“geometry.stroke”，
“造型师”：[
{
“颜色”：“8080”
}
]
},
{
“功能类型”：“道路”，
“elementType”：“几何体”，
“造型师”：[
{
“颜色”：“#4545”
}
]
}
];
变量映射选项={
中心：新google.maps.LatLng（47.295065,7.937821），
缩放：14，
动物控制：对，
ZoomControl选项：{
样式：google.maps.ZoomControlStyle.SMALL，
},
禁用双击缩放：false，
mapTypeControl:false，
scaleControl:false，
滚轮：错误，
泛控制：错误，
街景控制：错误，
可拖动：错误，
overviewMapControl:错误，
概述MapControlOptions：{
开：错，
},
mapTypeId:google.maps.mapTypeId.ROADMAP，
样式：样式数组
};
map=new google.maps.map（document.getElementById（“map”），
地图选项）；
变量位置=[
['V'，'undefined'，'undefined'，'undefined'，'undefined'，4.0，7.0，'https://mapbuildr.com/assets/img/markers/hollow-pin-red.png']
];
对于（i=0；i

尝试在中添加！对

位置很重要：固定的
属性。如果不起作用，那么添加jquery，将位置设置为固定在js文件底部
map.panBy（0200）
之后以及
map.setCenter（center）之后

希望这能有所帮助。
尝试在中添加！对
位置很重要：固定的
属性。如果不起作用，那么添加jquery，将位置设置为固定在js文件底部
map.panBy（0200）
之后以及
map.setCenter（center）之后

希望这能有所帮助。
在我使用Google Map API和使用jQuery显示地图时，同样的情况也发生了。在我的例子中，我使用CSS修复了如下问题：

#map
{
    position: fixed !important; 
    height: 100% !important;
    width: 100% !important;
}

<div id="map"></div>

要显示映射的div元素如下所示：

#map
{
    position: fixed !important; 
    height: 100% !important;
    width: 100% !important;
}

<div id="map"></div>

在我使用Google Map API并使用jQuery显示地图时，同样的情况也发生了。在我的例子中，我使用CSS修复了如下问题：

#map
{
    position: fixed !important; 
    height: 100% !important;
    width: 100% !important;
}

<div id="map"></div>

要显示映射的div元素如下所示：

#map
{
    position: fixed !important; 
    height: 100% !important;
    width: 100% !important;
}

<div id="map"></div>


！重要人物成功了！非常感谢你！应该尝试这个，而不是在文件中搜索几个小时！我在对iPhone6（11.2.2）上的缩短地图进行故障排除时遇到了同样的问题。底部20像素