使用js將Json文件加載到bing map API中

Question

我正在一個項目中，我有一個json文件，其中包含公司，其電話號碼，地址等的列表。目前，我將它加載到沒有真實順序的表中。 它可以列出公司，並在圖釘上顯示其位置。 我將其限制在10個上，以其近5000個條目的形式顯示-至少直到我獲得排序/搜索功能為止。 我遇到的問題是，我可以加載地圖並使用引腳的唯一方法是將它們包含在$ .getJSON中。 如果我創建了要在此之外加載的函數，則無法再從JSON中調用信息，但是同樣也無法在其中包含這些函數，因為它們不起作用。 這是我正在使用的代碼：

$.getJSON('MapDatabroke.json', function (data) {
    var output = "<table class = sample>";
    tableHeadings = "<thead>" +
        "<tr>" +
        "<th></th>" +
        "<th><u>Name:</u></th>" +
        "<th><u>Address:</u></th>" +
        "<th><u>City:</u></th>" +
        "<th><u>State:</u></th>" +
        "<th><u>Phone Number:</u></th>" +
        "<th><u>PO:</u></th>" +
        "<th><u>Towing:</u></th>" +
        "<th><u>Tires:</u></th>" +
        "<th><u>MC:</u></th>" +
        "<th><u>RoadSvc:</u></th>" +
        "<th><u>Notes:</u></th>" +
        "</tr>" +
        "</thead>";
    output += tableHeadings;

    for (var i = 0; i < length; i++) {

        var lat = data[i]["Lat"];
        var lon = data[i]["Lon"];
        var dist = 41.5;


        if (lat < dist) {
            output += "<tr>";
            if (data[i]["Website"] == '---') {
                output += "<td>" + ' ' + "</td>";
            } else {
                output += "<td><a href=\"" + data[i]["Website"] + "\">W</a></td>";
            }
            output += "<td>" + i + data[i]["Business Name"] + "</td>" + "<td>" + data[i]["Address"] + "</td>" + "<td>" + data[i]["City"] + "</td>" + "<td>" + data[i]["StateListing"] + "</td>" + "<td>" + data[i]["Phone"] + "</td>";
            if (data[i]["PO"] == 'FALSE') {
                output += "<td>" + data[i]["Notes"] + "</td>";
                output += "</tr>";
            }
        }

        output += "</table>";
        document.getElementById("placeholder").innerHTML = output;

    });

function GetMap() {
    var map = null;
    var pinInfobox = null;
    // Initialize the map
    var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {
        credentials: "AqtpRoPv2sfmrgf9VhyvDV8hCOVGPJi0-9heYhxmB-WU24OzpTIOIR0-C4fD0jc-",
        center: new Microsoft.Maps.Location(45.5, -122.5),
        zoom: 7
    });

    // Creates a collection to store multiple pins
    var pins = new Microsoft.Maps.EntityCollection();

    // Create Pins
    for (var i = 0; i < length; i++) {
        //pushpin location
        var position = new Microsoft.Maps.Location(data[i]["Lat"], data[i]["Lon"]);
        //Create the pin
        var pin = new Microsoft.Maps.Pushpin(position);
        //add pin to collection
        pins.push(pin);
    }
    //add pins
    map.entities.push(pins);


    //create the info box
    pinInfobox = new Microsoft.Maps.Infobox(pin.getLocation(), {
        title: 'My Pushpin',
        description: 'It works!',
        visible: false,
        offset: new Microsoft.Maps.Point(0, 15)
    });

    //add click event
    Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);

    //hide box on map move
    Microsoft.Maps.Events.addHandler(map, 'viewchange', hideInfobox);
}

function displayInfobox(e) {
    pinInfobox.setOptions({
        visible: true
    });
}

function hideInfobox(e) {
    pinInfobox.setOptions({
        visible: false
    });
}

上面顯示的方式無效。 它會加載地圖，但不會加載信息，並且會給我一個在create pin中未定義的數據錯誤。 有什么想法如何分配信息，以便以后可以在函數中使用它嗎？

Answer 1

嘗試將變量分配給$ .getJSON（var JSONData = $ .getJSON ...）。 這樣，您可以將數據放在查詢之外。

另一方面，您也可以使用$ .ajax進行查詢。 這只是做事的另一種方式，更加“可調整”。 此示例有一些錯誤處理程序，可以幫助您識別問題。

像這樣：

var JSONdata = $.ajax({
    type : "GET",
    url : "MapDatabroke.json",
    cache : false,
    dataType: "json",               // Use when retrieving

    success: function(data) {
        // do something here after retrieving the "data".
    },
    error: function (xhr, ajaxOptions, thrownError) { 
        //Add these parameters to display the required response
        console.log( 'xhr.status: ' + xhr.status );
        console.log( 'thrownError: ' + thrownError );
    }
});

另外，檢查您的json數據（ http://jsonlint.com/ ）。 有時在不應該使用的逗號或缺少括號的地方。