嵌入 Google 地图作为 CSS 叠加层无法正确加载

Question

我尝试在 CSS 叠加层中显示 Google 地图。问题是：Google 地图加载不正确。标记已设置，但缺少带有街道等的地图。

加载一定有问题。

有人知道为什么会这样吗？

我的CSS代码：

        .button {
        width: 150px;
        padding: 10px;
        background-color: #FF8C00;
        box-shadow: -8px 8px 10px 3px rgba(0, 0, 0, 0.2);
        font-weight: bold;
        text-decoration: none;
    }

    #cover {
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 5;
        width: 100%;
        height: 100%;
        display: none;
    }

    #loginScreen {
        height: 380px;
        width: 340px;
        margin: 0 auto;
        position: relative;
        z-index: 10;
        display: none;
        border: 5px solid #cccccc;
        border-radius: 10px;
        background-color: white;
    }
    #googlemap{
        height: 200px;
        width: 200px;
    }

    #loginScreen:target,
    #loginScreen:target + #cover {
        display: block;
        opacity: 2;
    }

    .cancel {
        display: block;
        position: absolute;
        top: 3px;
        right: 2px;
        background: rgb(245, 245, 245);
        color: black;
        height: 30px;
        width: 35px;
        font-size: 30px;
        text-decoration: none;
        text-align: center;
        font-weight: bold;
    }

HTML:

<div align="center">
<br>hello
<br><a href="#loginScreen" class="button">
Click here to open Google Map</a></div>
<div id="loginScreen">
<div id="googlemap"></div>
<p>I am just a text for demonstration.</p>
<a href="#" class="cancel">&times;</a> </div>
<div id="cover"> </div>

Javascript:

var label = 'B';
        var overlayContentString = 'Old house here.';
        var infoWindow = new google.maps.InfoWindow({content: overlayContentString});
    var myLatLng = {lat: 51.7124916, lng:8.435252};

    var map = new google.maps.Map(document.getElementById('googlemap'), {
        zoom: 15,
        center: myLatLng
    });

    var marker = new google.maps.Marker({
        position: {lat:51.7124916, lng:8.435252},
        map: map,
        title: 'My home!',
        animation: google.maps.Animation.DROP
    });

    marker.addListener('click', function() { infoWindow.open(map,marker);});

Answer 1

如果您对 #loginScreen 使用 opacity: 0; 而不是 display:none;，它应该可以工作。

如果你想使用display:none；单击并显示 div

时必须重新初始化地图

希望这对您有所帮助

嵌入 Google 地图作为 CSS 叠加层无法正确加载

Embedding Google Maps as CSS Overlay doesn't load properly

javascript

css

google-maps

overlay