Question

我在隐藏的div中遇到了Google地图的问题。它显示为完全灰色，但如果我调整网页大小再看起来不错。

这是我的代码。

function initMap() {
                                        var mapOptions = {
                                            center: {lat: 20.291, lng: 153.027},
                                            zoom: 6
                                        };

                                        //var map = new google.maps.Map(document.getElementById('google_map'),mapOptions);

                                        var map = new google.maps.Map($("#google_map")[0], mapOptions);

                                        var infowindow = new google.maps.InfoWindow();

                                        var lineSymbol = {
                                            path: 'M362.985,430.724l-10.248,51.234l62.332,57.969l-3.293,26.145 l-71.345-23.599l-2.001,13.069l-2.057-13.529l-71.278,22.928l-5.762-23.984l64.097-59.271l-8.913-51.359l0.858-114.43 l-21.945-11.338l-189.358,88.76l-1.18-32.262l213.344-180.08l0.875-107.436l7.973-32.005l7.642-12.054l7.377-3.958l9.238,3.65 l6.367,14.925l7.369,30.363v106.375l211.592,182.082l-1.496,32.247l-188.479-90.61l-21.616,10.087l-0.094,115.684',
                                            scale: 0.0433,
                                            fillColor: '#FFF',
                                            fillOpacity: 1,
                                            anchor: new google.maps.Point(300, 300)
                                        };

                                        for (i = 0; i < locations.length; i++) {
                                            marker = new google.maps.Marker({
                                                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                                                map: map,
                                                icon: 'https://www.prueba.com/imagenes/icons/airport.png'
                                            });

                                            google.maps.event.addListener(marker, 'click', (function (marker, i) {
                                                return function () {
                                                    //document.getElementById("left_window").innerHTML = locations[i][3] + " ICAO: " + locations[i][0];
                                                    infowindow.setContent('<div id="content">'+
                                                                          '<div id="siteNotice">'+
                                                                          '</div>'+
                                                                          '<h1 id="firstHeading" class="firstHeading">'+ locations[i][3] + '</h1>'+
                                                                          '<div id="bodyContent">'+
                                                                          '<p><b>AD salida:</b> aerodromo salida, <b>Elev:</b> x pies<br>' +
                                                                          '<b>AD llegada:</b> ad llegada<br>'+
                                                                          '<b>Duración:</b> duracion<br>'+
                                                                          '<b>Distancia:</b> distancia<br>'+
                                                                          '<b>Max level:</b> pies'+
                                                                          '</div></div>');
                                                    infowindow.open(map, marker);
                                                }
                                            })(marker, i));
                                        }

                                        // Create the polyline and add the symbol to it via the 'icons' property.
                                        var line = new google.maps.Polyline({
                                            path: [{lat: 41.297445, lng: 2.0832941}, {lat: 39.5517, lng: 2.736164899999949}],
                                            icons: [{
                                                icon: lineSymbol,
                                                offset: '50%'
                                            }],
                                            map: map
                                        });

                                        animateCircle(line);

                                    }

                                  // Use the DOM setInterval() function to change the offset of the symbol
                                  // at fixed intervals.
                                    function animateCircle(line) {
                                          var count = 0;
                                          window.setInterval(function() {
                                            count = (count + 1) % 200;

                                            var icons = line.get('icons');
                                            icons[0].offset = (count / 2) + '%';
                                            line.set('icons', icons);
                                        }, 50);
                                    }

在检查所有代码仍然相同之后，我不知道问题出在哪里。我也尝试de Timeout。

提前感谢您的帮助或建议。

Answer 1

CSS可见性：隐藏应该工作显示：none不会。如果您不想看到div，直到它准备就绪，那么您可以使用偏移顶部将其隐藏在其他东西之后。

Google地图在隐藏的div中显示灰色

1 个答案: