时间戳

首页 > 解决方案 > 第二个 $.ajax 调用被跳过

javascript - 第二个 $.ajax 调用被跳过

问题描述

我正在使用 google maps javascript api，并尝试在用户单击 div 时更新热图。传入热图中的经纬度数据来自本地 json 文件。目前，我可以让我的网页加载地图，并且热图叠加层正确显示。问题是当我点击一个 div 并期望热图数据得到更新时，热图就消失了。通过我的调试，我发现当我在点击监听器中运行时$.ajax，我的方法中的调用getPoints(file)被跳过了。getPoints(file)有谁知道可能出了什么问题？这是我的代码：

var map, heatmap;
function initMap() {
    var sanFran = {
        lat: 37.775299,
        lng: -122.432432
    }

    map = new google.maps.Map(document.getElementById('Map'), {
        zoom: 10,
        center: sanFran,
    });

    heatmap = new google.maps.visualization.HeatmapLayer({
        data: getPoints("2016-07-02--11-56-24.json"),
        map: map
      });
};    

function getPoints(file) {
    retArr = [];
    var weblink = "http://localhost:8080/trips/" + file;
    $.ajax({
        url: weblink,
        dataType:"json",
        success:function(data){
            for(var i = 0; i< data.coords.length; i++){
                console.log(data.coords[i]);
                retArr.push(new google.maps.LatLng(data.coords[i].lat, data.coords[i].lng))
            }
        }
    });
    return retArr;
}
$.each(jsTrips,function(k,v){
    $("#"+k).on("click",function(){
        heatmap.set('data', getPoints(v));
    })
})

json数据遵循以下格式：

{
"start_time":some time,
"coords": [{lat,long},{lat,long},{lat,long}],
"end time":some time
}

如果需要更多详细信息，请告诉我，我会更新问题。

谢谢！！！

标签： javascriptjsonajaxgoogle-maps

解决方案

$.ajax是异步的，这意味着您返回的数组getPoints将始终为空 - 异步success函数始终在getPoints返回后发生。

您需要将代码重组为：

var map;
function initMap() {
    var sanFran = {
        lat: 37.775299,
        lng: -122.432432
    }

    map = new google.maps.Map(document.getElementById('Map'), {
        zoom: 10,
        center: sanFran,
    });
};    

function getPoints(file) {
    $.ajax({
        url: `http://localhost:8080/trips/${file}`
        dataType: "json",
        success: rawData => {
            const data = rawData.coords.map(({ lat, long }) =>
                new google.maps.LatLng(lat, lng)
            );
            new google.maps.visualization.HeatmapLayer({
                data,
                map
            })
        }
    });
}
$.each(jsTrips,function(k,v){
    $("#"+k).on("click",function(){
        getPoints(v);
    })
})

警告：未经测试

推荐阅读