Fatal编程技术网

Javascript 谷歌地图不显示

javascript jquery google-maps

Javascript 谷歌地图不显示,javascript,jquery,google-maps,fadein,symfony-3.2,Javascript,Jquery,Google Maps,Fadein,Symfony 3.2,我正在用Symfony 3开发一个应用程序。我有一个div，里面显示的是谷歌地图 我把这页藏起来了 <div id="page_content" style="display: none"> </div> 如果不删除fadeIn（'slow'）动画，我该怎么做才能让地图显示？当div隐藏时，尝试初始化地图时会出现一些问题。因此，您可以在FadeIn动画完成后，使用以下代码触发贴图： $(document).ready(functi

我正在用Symfony 3开发一个应用程序。我有一个div，里面显示的是谷歌地图

我把这页藏起来了

<div id="page_content" style="display: none">
</div>
如果不删除
fadeIn（'slow'）
动画，我该怎么做才能让地图显示？

当div隐藏时，尝试初始化地图时会出现一些问题。因此，您可以在FadeIn动画完成后，使用以下代码触发贴图：

$(document).ready(function () {
    $('#page_content').fadeIn('slow', function() {
         var center = map.getCenter();
         google.maps.event.trigger(map, 'resize');
         map.setCenter(center);
    });
});
确保动画完成时声明了
map
变量。

隐藏div时尝试初始化贴图时出现一些问题。因此，您可以在FadeIn动画完成后，使用以下代码触发贴图：

$(document).ready(function () {
    $('#page_content').fadeIn('slow', function() {
         var center = map.getCenter();
         google.maps.event.trigger(map, 'resize');
         map.setCenter(center);
    });
});
确保动画完成时声明了
map
变量。

您立即调用
googleMapApiLaunch
。。。只需在fadeIn完成后执行此操作：

$(document).ready(function () {
    $('#page_content').fadeIn('slow', function() {
        googleMapApiLaunch(init_lng, init_lat);
    );
});
更新：因为不能从主fadeIn方法直接调用googleMapApiLaunch，所以可以从那里触发事件。然后在映射页面上使用事件侦听器。e、 g

$(document).ready(function () {
    $('#page_content').fadeIn('slow', function() {
        $(this).trigger("fadeInComplete");
    );
});
然后在地图页面JS中：

$('#page_content').on('fadeInComplete', function () {
    googleMapApiLaunch(init_lng, init_lat);
});
您可以立即调用
googleMapApiLaunch
。。。只需在fadeIn完成后执行此操作：

$(document).ready(function () {
    $('#page_content').fadeIn('slow', function() {
        googleMapApiLaunch(init_lng, init_lat);
    );
});
更新：因为不能从主fadeIn方法直接调用googleMapApiLaunch，所以可以从那里触发事件。然后在映射页面上使用事件侦听器。e、 g

$(document).ready(function () {
    $('#page_content').fadeIn('slow', function() {
        $(this).trigger("fadeInComplete");
    );
});
然后在地图页面JS中：

$('#page_content').on('fadeInComplete', function () {
    googleMapApiLaunch(init_lng, init_lat);
});
您好，我以前也遇到过类似的问题，如果您在localhost中测试它，请使用

它将解决您的问题，因为像谷歌地图这样的一些API不能在本地主机上工作，它需要使用ngrok才能工作

让我们看看它是否适合你

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

});
您好，我以前也遇到过类似的问题，如果您在localhost中测试它，请使用

它将解决您的问题，因为像谷歌地图这样的一些API不能在本地主机上工作，它需要使用ngrok才能工作

让我们看看它是否适合你

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

});
理想情况下，您可以向fadeIn函数传递回调来执行此操作，但由于您无法执行此操作

或者你也可以这样做

字符串“快”和“慢”可以是 用于指示200毫秒和600毫秒的持续时间， 分别地如果提供了任何其他字符串，或者如果持续时间 参数，则默认持续时间为400毫秒 用过

您可以添加一个超时并执行
googleMapApiLaunch（init_lng，init_lat）600毫秒后


 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());
            }
        });
    }



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

或者你也可以这样做

字符串“快”和“慢”可以是
用于指示200毫秒和600毫秒的持续时间，
分别地如果提供了任何其他字符串，或者如果持续时间
参数，则默认持续时间为400毫秒
用过

您可以添加一个超时并执行
googleMapApiLaunch（init_lng，init_lat）600毫秒后


 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());
            }
        });
    }



您的
md卡内容
div是否在
page\u内容
div中？您的
div
是
display:none
，表示大小为
0
，若要使代码与动画一起工作，请将动画技术从
不透明度：0
更改为
不透明度：1
，或者，或者，您可以使用
resize
方法，因为当
display:block
时，大小设置为div@NadirLaskar yes@ShekharPankaj好主意。请给我写一点代码好吗？你的
md卡内容是否在
page\u内容中
div？你的
div
是
display:none
这意味着大小是
0
，要使你的代码与动画一起工作，请将动画技术从
不透明度：0
更改为
不透明度：1
，或者，或者，您可以使用
resize
方法，因为当
display:block
时，大小设置为div@NadirLaskar yes@ShekharPankaj好主意。请你给我写一点代码好吗？在我的实际页面中，我从base.twig.html扩展而来，其中我做了$（document）.ready（函数（）{$（'page_content'）.fadeIn（'slow）；}）；在我的实际页面中，我没有在所有页面中都使用map，而是从base.twig.html扩展而来，其中我使用了$（document）.ready（函数（）{$（'page_content'）.fadeIn（'slow）；}）；在我的实际页面中，我没有在所有页面中都使用map，而是从base.twig.html扩展而来，其中我使用了$（document）.ready（函数（）{$（'page_content'）.fadeIn（'slow）；}）；在我的实际页面中，我没有在所有页面中都使用map，而是从base.twig.html扩展而来，其中我使用了$（document）.ready（函数（）{$（'page_content'）.fadeIn（'slow）；}）；我没有在服务器主机上持续存在的所有页面中都有映射，所以这是您的代码上的问题，我将检查并更新服务器主机上持续存在的应答，所以这是您的代码上的问题，我将检查并更新应答