未显示 googleMap

Question

我正在使用 Symfony 3 开发一个应用程序。我有一个 div，其中显示了一个 Google 地图。

我用

隐藏页面

<div id="page_content" style="display: none">
</div>

然后我这样做了：

$(document).ready(function () {
    $('#page_content').fadeIn('slow');
})

This let me show a little animation while the browser is creating the page's doms.
But in this way the div in which there is the map is displayed only if I press the <kbd>F12</kbd> key. 

The div in which I'm displaying map: 

```html
<div class="md-card-content large-padding">
    <div id="displaymap">
        <div>
            <input id="pac-input" class="controls" type="text" placeholder="Search Box">
            <div id="map-canvas" style="width: 100%; height: 375px;">
            </div>
        </div>
    </div>
</div>

JavaScript函数：

var init_lng = '{{ bien.longitude }}';
    var init_lat = '{{ bien.latitude }}';
    var marker;
    googleMapApiLaunch(init_lng, init_lat);
    function googleMapApiLaunch(lng, lat) {
        var longitude = $('#sbc_bienbundle_bien_longitude');
        var latitude = $('#sbc_bienbundle_bien_latitude');
        {% if bien.id != 0 %}
        longitude.val(lng);
        latitude.val(lat);
        {% else %}
        if (lat === init_lat && lng === init_lng) {
            longitude.val('');
            latitude.val('');
        } else {
            longitude.val(lng);
            latitude.val(lat);
        }
        {% endif %}
        lat = parseFloat(lat);
        lng = parseFloat(lng);
        //map..
        var map = new google.maps.Map(document.getElementById('map-canvas'), {
            center: {
                lat: lat,
                lng: lng
            },
            zoom: 14
        });
        // Create the search box and link it to the UI element.
        var input = document.getElementById('pac-input');
        var searchBox = new google.maps.places.SearchBox(input);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
        var markers = [];
        // Bias the SearchBox results towards current map's viewport.
        google.maps.event.addListener(searchBox, 'places_changed', function () {
            var places = searchBox.getPlaces();
            if (places.length === 0) {
                return;
            }
            // Clear out the old markers.
            markers.forEach(function (iMarker) {
                iMarker.setMap(null);
            });
            markers = [];
            // For each place, get the icon, name and location.
            var bounds = new google.maps.LatLngBounds();
            places.forEach(function (place) {
                var icon = {
                    url: place.icon,
                    size: new google.maps.Size(71, 71),
                    origin: new google.maps.Point(0, 0),
                    anchor: new google.maps.Point(17, 34),
                    scaledSize: new google.maps.Size(25, 25)
                };
                // Create a marker for each place.
                markers.push(new google.maps.Marker({
                    map: map,
                    icon: icon,
                    title: place.name,
                    position: place.geometry.location
                }));
                if (place.geometry.viewport) {
                    // Only geocodes have viewport.
                    bounds.union(place.geometry.viewport);
                } else {
                    bounds.extend(place.geometry.location);
                }
            });
            map.fitBounds(bounds);
        });
        //marker..
        marker = new google.maps.Marker({
            position: {
                lat: lat,
                lng: lng
            },
            map: map,
            draggable: true
        });
        //dragend event of maker
        google.maps.event.addListener(marker, 'dragend', function () {
            //console.log(marker.getPosition());
            if (ismapped.is(':checked')) {
                longitude.val(marker.getPosition().lng());
                latitude.val(marker.getPosition().lat());
            }
        });
    }

我需要做什么才能在不移除 fadeIn('slow') 动画的情况下显示地图？

Answer 1

在 div 隐藏的情况下尝试初始化地图时会出现一些问题。所以，你可以做的是当 FadeIn 动画结束时，用下面的代码触发地图：

$(document).ready(function () {
    $('#page_content').fadeIn('slow', function() {
         var center = map.getCenter();
         google.maps.event.trigger(map, 'resize');
         map.setCenter(center);
    });
});

确保在动画结束时声明 map 变量。

Answer 2

您立即调用 googleMapApiLaunch...在淡入完成时调用：

$(document).ready(function () {
    $('#page_content').fadeIn('slow', function() {
        googleMapApiLaunch(init_lng, init_lat);
    );
});

更新： 因为您不能直接从主 fadeIn 方法调用 googleMapApiLaunch，您可以从那里触发一个事件。然后有一个只在地图页面上使用的事件监听器。例如

$(document).ready(function () {
    $('#page_content').fadeIn('slow', function() {
        $(this).trigger("fadeInComplete");
    );
});

然后在你的地图页面JS中：

$('#page_content').on('fadeInComplete', function () {
    googleMapApiLaunch(init_lng, init_lat);
});

Answer 3

嗨，我以前遇到过类似的问题，如果您在本地主机上测试它，请使用 ngrok

它会解决你的问题，因为像 google 地图这样的 API 不能在本地主机上工作，它需要使用 ngrok 才能工作

让我们看看它是否适合你

$(document).ready(function () {
    $('#page_content').fadeIn('slow');
    $('#page_content').show();
    $('#displaymap').show(); 

});

Answer 4

理想情况下，您将回调传递给 fadeIn 函数来执行此操作，但由于您无法执行此操作。

您也可以这样做。

The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively. If any other string is supplied, or if the duration parameter is omitted, the default duration of 400 milliseconds is used.

您可以添加超时并在 600 毫秒后执行 googleMapApiLaunch(init_lng, init_lat);。

 setTimeout(function(){
       googleMapApiLaunch(init_lng, init_lat);
    },650); // jquery slow takes 600ms

更新 JS

    var init_lng = '{{ bien.longitude }}';
    var init_lat = '{{ bien.latitude }}';
    var marker;

    setTimeout(function(){
       googleMapApiLaunch(init_lng, init_lat);
    },650); // jquery slow takes 600ms

    function googleMapApiLaunch(lng, lat) {
        var longitude = $('#sbc_bienbundle_bien_longitude');
        var latitude = $('#sbc_bienbundle_bien_latitude');
        {% if bien.id != 0 %}
        longitude.val(lng);
        latitude.val(lat);
        {% else %}
        if (lat === init_lat && lng === init_lng) {
            longitude.val('');
            latitude.val('');
        } else {
            longitude.val(lng);
            latitude.val(lat);
        }
        {% endif %}
        lat = parseFloat(lat);
        lng = parseFloat(lng);
        //map..
        var map = new google.maps.Map(document.getElementById('map-canvas'), {
            center: {
                lat: lat,
                lng: lng
            },
            zoom: 14
        });
        // Create the search box and link it to the UI element.
        var input = document.getElementById('pac-input');
        var searchBox = new google.maps.places.SearchBox(input);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
        var markers = [];
        // Bias the SearchBox results towards current map's viewport.
        google.maps.event.addListener(searchBox, 'places_changed', function () {
            var places = searchBox.getPlaces();
            if (places.length === 0) {
                return;
            }
            // Clear out the old markers.
            markers.forEach(function (iMarker) {
                iMarker.setMap(null);
            });
            markers = [];
            // For each place, get the icon, name and location.
            var bounds = new google.maps.LatLngBounds();
            places.forEach(function (place) {
                var icon = {
                    url: place.icon,
                    size: new google.maps.Size(71, 71),
                    origin: new google.maps.Point(0, 0),
                    anchor: new google.maps.Point(17, 34),
                    scaledSize: new google.maps.Size(25, 25)
                };
                // Create a marker for each place.
                markers.push(new google.maps.Marker({
                    map: map,
                    icon: icon,
                    title: place.name,
                    position: place.geometry.location
                }));
                if (place.geometry.viewport) {
                    // Only geocodes have viewport.
                    bounds.union(place.geometry.viewport);
                } else {
                    bounds.extend(place.geometry.location);
                }
            });
            map.fitBounds(bounds);
        });
        //marker..
        marker = new google.maps.Marker({
            position: {
                lat: lat,
                lng: lng
            },
            map: map,
            draggable: true
        });
        //dragend event of maker
        google.maps.event.addListener(marker, 'dragend', function () {
            //console.log(marker.getPosition());
            if (ismapped.is(':checked')) {
                longitude.val(marker.getPosition().lng());
                latitude.val(marker.getPosition().lat());
            }
        });
    }

未显示 googleMap

googleMap is not displayed

javascript

jquery

google-maps

fadein

symfony-3.2