我正在开发一个项目,我有一个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
});
}
上面显示的方式不起作用。它将加载地图,但不会加载信息,也不会在创建引脚中给出我未定义的数据错误。任何想法如何分配信息,以便我以后可以在函数中使用它?
答案 0 :(得分:0)
尝试将变量赋值给$ .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/)。有时会有一个逗号,不应该或者缺少括号。