重新加载浏览器时谷歌地图不会呈现

问题描述 投票：0回答：1

我的问题不完全是关于代码，而是我正在开发一个网络视频游戏，我正在其中实现 JavaScript 的 GoogleMaps API，并且我遇到了这样的问题：第一次运行代码时，浏览器会向我显示地图并执行不是我没有问题。 Map rendered the first time it is run 但是当我重新加载浏览器时，地图不会重新渲染，并在地图应该在的位置显示阴影。 [重新加载浏览器时地图未渲染(https://i.stack.imgur.com/NioUx.png)

第一次运行希望你能帮助我。

如果我清除浏览器数据并再次运行它，它会再次工作。 我如何检测它是否已经具有某种类型的先前配置或类似的配置。控制台没有显示任何错误，让我知道去哪里。

javascript browser google-maps-api-3 maps reload
1个回答
0
投票

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    #map{
        height: 100%;
    }
    html,
    body{
        height: 100%;
        margin: 0;
        padding: 0;
    }
</style>
</head>
<body>
    <div id="map"></div>
</body>
<script type="module">
    // First example
    /**window.initMap = function(){
        const coords = {lat: 41.40512130753172, lng: 2.180501713954959};
        const map = new google.maps.Map(document.getElementById('map'),{
            zoom: 15,
            center: coords,
            mapId: 'DEMO_MAP_ID'
        });

        const marker = new google.maps.marker.AdvancedMarkerElement({
            map,
            position: coords,
            title: 'Uluru',
        });
    };*/
// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see the error "The Geolocation service
// failed.", it means you probably did not give permission for the browser to
// locate you.
let map, infoWindow;

window.initMap = function() {
    map = new google.maps.Map(document.getElementById("map"), {
        center: { lat: 41.40512130753172, lng: 2.180501713954959 },
        zoom: 15,
        mapId: 'DEMO_MAP_ID'
    });
    console.log(map);
    infoWindow = new google.maps.InfoWindow();

    const locationButton = document.createElement("button");

    locationButton.textContent = "Pan to Current Location";
    locationButton.classList.add("custom-map-control-button");
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);
    locationButton.addEventListener("click", () => {
    // Try HTML5 geolocation.
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                (position) => {
                    const pos = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude,
                    };

                    infoWindow.setPosition(pos);
                    infoWindow.setContent("Location found.");
                    infoWindow.open(map);
                    map.setCenter(pos);
                },
                () => {
                    handleLocationError(true, infoWindow, map.getCenter());
                }
            );
        } else {
          // Browser doesn't support Geolocation
            handleLocationError(false, infoWindow, map.getCenter());
        }
    });
}

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
    infoWindow.setPosition(pos);
    infoWindow.setContent(
        browserHasGeolocation
        ? "Error: The Geolocation service failed."
        : "Error: Your browser doesn't support geolocation."
    );
    infoWindow.open(map);
}

</script>
<script
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBTQlrXDIaHJI3m71qRV4SAGl_F8lY_sZ0&v=weekly&libraries=marker&callback=initMap"defer>
</script>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.