KG API非常适合定义明确的实体,例如人物或地点。但是,当我查找一些更抽象的内容(例如“水球”或“都铎王朝”)时,API的最高结果就不那么准确,而Google主页对其进行了很好的处理。
我想输入一个查询,然后重现 just 通常在Google搜索旁边显示的知识图面板。有办法吗?
var getJSON = function(url) {
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open('get', url, true);
xhr.responseType = 'json';
xhr.onload = function() {
var status = xhr.status;
if (status == 200) {
resolve(xhr.response);
} else {
reject(status);
}
};
xhr.send();
});
};
var counter;
var resultType;
document.getElementById('btn').onclick = function() {
counter = 0;
document.getElementById('article').innerHTML = "";
document.getElementById('description').innerHTML = "";
document.getElementById('detail').innerHTML = "";
document.getElementById('image').innerHTML = "";
var val = document.getElementById('queryname').value;
resultType = '';
if(document.getElementById('btn3').checked){
resultType = '&types=Person';
}
if(document.getElementById('btn4').checked){
resultType = '&types=Place';
}
if(document.getElementById('btn5').checked){
resultType = '&types=Organization';
}
getJSON('https://kgsearch.googleapis.com/v1/entities:search?limit=10&query=' + val + resultType + '&key=AIzaSyAGnHQPVS4lyoCykENphnHtUpKdgWXXu6o').then(function(data) {
article.innerHTML = data.itemListElement[counter].result.name;
description.innerHTML = data.itemListElement[counter].result.description;
detail.innerHTML = data.itemListElement[counter].result.detailedDescription.articleBody;
img = document.createElement('img');
img.src = data.itemListElement[counter].result.image.contentUrl;
img.style.maxWidth="245px";
image.appendChild(img);
}, function(status) { //error detection....
alert('Something went wrong.');
});
}
document.getElementById('btn2').onclick = function() {
counter = counter+1;
document.getElementById('article').innerHTML = "";
document.getElementById('description').innerHTML = "";
document.getElementById('detail').innerHTML = "";
document.getElementById('image').innerHTML = "";
var val = document.getElementById('queryname').value;
resultType = '';
if(document.getElementById('btn3').checked){
resultType = '&types=Person';
}
if(document.getElementById('btn4').checked){
resultType = '&types=Place';
}
if(document.getElementById('btn4').checked){
resultType = '&types=Organization';
}
getJSON('https://kgsearch.googleapis.com/v1/entities:search?limit=10&query=' + val + resultType + '&key=AIzaSyAGnHQPVS4lyoCykENphnHtUpKdgWXXu6o').then(function(data) {
article.innerHTML = data.itemListElement[counter].result.name;
description.innerHTML = data.itemListElement[counter].result.description;
detail.innerHTML = data.itemListElement[counter].result.detailedDescription.articleBody;
img = document.createElement('img');
img.src = data.itemListElement[counter].result.image.contentUrl;
img.style.maxWidth="245px";
image.appendChild(img);
}, function(status) { //error detection....
alert('Something went wrong.');
});
}
document.getElementById('btn6').onclick = function() {
document.getElementById('article').innerHTML = "";
document.getElementById('description').innerHTML = "";
document.getElementById('detail').innerHTML = "";
document.getElementById('image').innerHTML = "";
}
body {
background-color: #212320;
}
p1 {
font-family: "Times New Roman";
font-size: 40px;
color: #acaeab;
}
p2 {
font-family: "Times New Roman";
font-size: 20px;
font-style: italic;
color: #acaeab;
}
p3 {
font-family: "Helvetica";
font-size: 15px;
color: #acaeab;
}
#container {
min-height: 100%;
}
#footer {
position:absolute;
bottom:0;
}
<div id="container">
<p1><div id="article" style="margin-top:30px; margin-bottom:15px; text-align:center"></div></p1>
<p2><div id="description" style="margin-bottom:30px; text-align:center; width:51%; float:left"></div></p2>
<p3><div id="detail" style="padding-left:10px; width:51%; float:left"></div></p3>
<div id="image" style="width:47%; float:right; text-align:center"></div>
<div id="footer">
<form>
<input type="text" id="queryname" value="" onkeypress="return searchKeyPress(event);" />
<input type="button" id="btn" value="GO" />
<input type="button" id="btn2" value="NEXT" />
<button type="button" style="margin-left:30px;" disabled>
PERSON</button>
<input type="checkbox" id="btn3" />
<button type="button" disabled> PLACE</button>
<input type="checkbox" id="btn4" />
<button type="button" disabled> ORG</button>
<input type="checkbox" id="btn5" />
<input type="button" id="btn6" value="CLEAR" />
</form>
</div>
</div>
<script>
function searchKeyPress(e)
{
// look for window.event in case event isn't passed in
e = e || window.event;
if (e.keyCode == 13)
{
document.getElementById('btn').click();
return false;
}
return true;
}
</script>