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
    });
}

上面显示的方式不起作用。它将加载地图，但不会加载信息，也不会在创建引脚中给出我未定义的数据错误。任何想法如何分配信息，以便我以后可以在函数中使用它？

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/）。有时会有一个逗号，不应该或者缺少括号。

使用js将Json文件加载到bing map API中

1 个答案: