javascript - 将 Google map 嵌入为 CSS 叠加层无法正确加载

Question

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

我创建了一个 JSFiddle to show my problem .

加载一定有问题。

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

我的 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

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

如果你想使用display:none;单击并显示 div 时必须重新初始化 map

希望对你有帮助