如何加載谷歌地圖作為回調？

Question

我定義了一個ajax函數，該函數從數據庫中獲取一些記錄，在獲取數據后，我想加載google maps，因此我將該函數作為回調傳遞：

get_records = function (callback) {
    var postUrl = "someurl";
    var postData =
    {
        csrfToken: "token",
    };

    $.post(postUrl, postData, function (response) {
        callback(response);
    });
};

這是回調：

get_records(function(result){
    init_map();
});

其中，init_map是：

init_map = function () {

    var map;

    google.maps.event.addDomListener(window, "load", function () {

        map = new google.maps.Map(document.getElementById("map"), {
            center: new google.maps.LatLng(33.808678, -117.918921),
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

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

        function createMarker(options, html) {
            var marker = new google.maps.Marker(options);
            if (html) {
                google.maps.event.addListener(marker, "click", function () {
                    infoWindow.setContent(html);
                    infoWindow.open(options.map, this);
                });
            }
            return marker;
        }

        var marker0 = createMarker({
            position: new google.maps.LatLng(40.9117877, 14.7679659),
            map: map,
            icon: "../assets/img/marker-green.png"
        }, "<h1 class='black-content'>Marker 0</h1><p>This is the home marker.</p>");
    });

    return map;
};

如果我將init_map函數放置在get_records之外，則顯示地圖，但是使用上面的代碼卻沒有顯示地圖，為什么？

Answer 1

如果ajax帖子沒有響應，則永遠不會調用該回調。

更好的方法是使用Promise接口：

var jqxhr = $.post("example.php", function() {
  console.log("success")
}).done(function() {
  // call init_map() on done?
}).fail(function() {
  // call init_map() on error?
}).always(function() {
  // call init_map() regardless the response?
})

另外，您正在使用google.maps.event.addDomListener在窗口加載期間添加偵聽器。 如果確定在發布ajax帖子之前已加載頁面，則不需要此偵聽器。 您只需要在init_map函數內創建一個新地圖。