Question

我尝试在我的网站上实施Google Maps v3 API。我目前正在使用JS脚本来加载地图。目前，中心，缩放和其他一些东西的所有值都硬编码到我的脚本中。我希望能够以JSON格式从PHP文件中提取这些值。在我当前的脚本文件中，我按此顺序调用我的函数：

function initJSON(){
    var answerjson = undefined;
    var requestAnswer = $.getJSON('URL');
    requestAnswer.done(function (data) {
    answerjson = data;
    }); 
}

function initMap() {

    map = new google.maps.Map(document.getElementById('map'), {
    zoom: //Would like to get data from JSON,
    center: //Would like to get data from JSON,
    mapTypeId: 'terrain'
    });

    //Code here about creating a shape outliner, not important

    variableDefinedAbove.addListener('click', showArrays);

}


function showArrays(event) {
    var vertices = this.getPath();
    var contentString = //Would like to get data from JSON ;        
    infoWindow.setContent(contentString);
    infoWindow.setPosition(event.latLng);
    infoWindow.open(map);
}

当我调用此脚本时，Javascript在initJSON可以提取数据之前完成initMap（）和showArrays（）函数。我理解如何将完成的initJSON（）中的数据放入我的其他函数中，但是＆＃39; answerjson＆＃39;这些函数运行时未定义，使它们无用。有没有办法可以重构我的程序，以便initJSON（）必须在运行任何其他函数之前完成？我知道我可以用async和Promises做到这一点，但我对它们没有经验，如果有一个更简单的解决方案，我宁愿使用它们。

Answer 1

简单的答案是通过.done来电的getJSON来调用您的功能 - 就像这样：

function initJSON(){
    //var answerjson = undefined; dont do this, you can pass this to where you need it
    var requestAnswer = $.getJSON('URL');
    requestAnswer.done(function (data) {
        //answerjson = data;
        //call your function here
        initMap(data); //pass data to map function
    }); 
}

并更新您的initMap功能以从服务器获取数据：

function initMap(data) {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: data.someProperty,//replace with actual prop name
        center: data.someOtherProperty, //replace with actual prop name
        mapTypeId: 'terrain'
    });

    //Code here about creating a shape outliner, not important

    variableDefinedAbove.addListener('click', showArrays);
}

重构我的代码以避免异步.getJSON AJAX调用

1 个答案: