javascript - Ajax 和 Json 完成事件不会触发 Google map

Question

我的 Google map 有问题，它不显示(尝试了与隐藏选项卡相关的几项操作，但这是不同的)我有一个 ajax，可以发布一些数据并完整获取一些数据，只是 Google map 未在完成事件时触发。

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="map-canvas"></div>

JavaScript

jQuery_1_11_0(document).ready(function () {
    var domain = '<?php echo $url; ?>'; // google.com
    $.ajax({
        type: 'POST',
        url: 'lib/ajax.php'
        data: {
            action: 'get_all_seo_details',
            domain: domain
        },
        beforeSend: function (data) {
            $('#map-canvas').html('Loading...');
        },
        complete: function () {
            $.getJSON('lib/get-details.php', function(data) {
            var lat = data.lat; // -25.363882
            var long = data.long; // 131.044922
            // those are ok, are displayed correctly
            function initialize() {
                var mapOptions = {
                    zoom: 4,
                    center: new google.maps.LatLng(-25.363882, 131.044922)
                };
                var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
                google.maps.event.trigger(map, 'resize');
                var marker = new google.maps.Marker({
                    position: map.getCenter(),
                    icon: {
                        path: google.maps.SymbolPath.CIRCLE,
                        scale: 10
                    },
                    draggable: true,
                    map: map
                });
            }
            google.maps.event.addDomListener(window, 'load', initialize);
            });
        }
    });
});

Answer 1

简化一下。你的初始化函数需要从你的ajax调用中获取mapsOptions。当ajax调用准备就绪时，准备mapOptions，然后使用 map 选项调用初始化函数。

jQuery_1_11_0(document).ready(function () {
    var domain = '<?php echo $url; ?>'; // google.com
    $.ajax({
        type: 'POST',
        url: 'lib/ajax.php'
        data: {
            action: 'get_all_seo_details',
            domain: domain
        },
        beforeSend: function (data) {
            $('#map-canvas').html('Loading...');
        },
        complete: function () {
            $.getJSON('lib/get-details.php', function(data) {
            var lat = data.lat; // -25.363882
            var long = data.long; // 131.044922
            // those are ok, are displayed correctly
           //Prepare mapOptions 
           var mapOptions = {
                    zoom: 4,
                    center: new google.maps.LatLng(lat, long)
                };
              //Now init. map
                initialize(mapOptions);
            });

            };
        })
    });


     function initialize(mapOptions) {
    {

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
                google.maps.event.trigger(map, 'resize');
                var marker = new google.maps.Marker({
                    position: map.getCenter(),
                    icon: {
                        path: google.maps.SymbolPath.CIRCLE,
                        scale: 10
                    },
                    draggable: true,
                    map: map
                });
    }

});