获取 Google 图像图片 URL 列表的调用
GET Call for Getting List of Google Image Picture URLs
我如何获得 JSON 图像 Google 图像 returns 的响应？
我尝试浏览文档，发现 Google 图片 API 已被弃用，取而代之的是 Google 自定义搜索 API。据我了解，Google 自定义搜索允许您在域内而不是整个网络中进行搜索。我尝试进行以下调用，但返回的 JSON 响应没有任何图像 URLS
GET https://www.googleapis.com/customsearch/v1?key={API_KEY}&cx={ENGINE_API}&q=vancouver&searchType=image
{
"kind": "customsearch#search",
"url": {
"type": "application/json",
"template": "https://www.googleapis.com/customsearch/v1?q={searchTerms}&num={count?}&start={startIndex?}&lr={language?}&safe={safe?}&cx={cx?}&sort={sort?}&filter={filter?}&gl={gl?}&cr={cr?}&googlehost={googleHost?}&c2coff={disableCnTwTranslation?}&hq={hq?}&hl={hl?}&siteSearch={siteSearch?}&siteSearchFilter={siteSearchFilter?}&exactTerms={exactTerms?}&excludeTerms={excludeTerms?}&linkSite={linkSite?}&orTerms={orTerms?}&relatedSite={relatedSite?}&dateRestrict={dateRestrict?}&lowRange={lowRange?}&highRange={highRange?}&searchType={searchType}&fileType={fileType?}&rights={rights?}&imgSize={imgSize?}&imgType={imgType?}&imgColorType={imgColorType?}&imgDominantColor={imgDominantColor?}&alt=json"
},
"queries": {
"request": [
{
"title": "Google Custom Search - vancouver",
"totalResults": "14400000",
"searchTerms": "vancouver",
"count": 10,
"startIndex": 1,
"inputEncoding": "utf8",
"outputEncoding": "utf8",
"safe": "off",
"cx": "004087055820537748846:jsb6pxcwlfc",
"searchType": "image"
}
],
"nextPage": [
{
"title": "Google Custom Search - vancouver",
"totalResults": "14400000",
"searchTerms": "vancouver",
"count": 10,
"startIndex": 11,
"inputEncoding": "utf8",
"outputEncoding": "utf8",
"safe": "off",
"cx": "004087055820537748846:jsb6pxcwlfc",
"searchType": "image"
}
]
},
"context": {
"title": "Google"
},
"searchInformation": {
"searchTime": 0.387643,
"formattedSearchTime": "0.39",
"totalResults": "14400000",
"formattedTotalResults": "14,400,000"
},
"items": [
{
"kind": "customsearch#result",
"title": "Gastown in Vancouver",
"htmlTitle": "Gastown in \u003cb\u003eVancouver\u003c/b\u003e",
"link": "https://www.google.com/maps/d/thumbnail?mid=1cjm_9rHpykRpj_ynUSKktJuaVPo&hl=en",
"displayLink": "www.google.com",
"snippet": "Gastown in Vancouver",
"htmlSnippet": "Gastown in \u003cb\u003eVancouver\u003c/b\u003e",
"mime": "image/",
"image": {
"contextLink": "https://www.google.com/mymaps/viewer?mid=1cjm_9rHpykRpj_ynUSKktJuaVPo&hl=en",
"height": 520,
"width": 504,
"byteSize": 65000,
"thumbnailLink": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTM1MMx7p1iq8mIIAGQ9vhOq3jCO5DfD2Hg0JxDIP-xv_te-5y3bJ6aU3Ef",
"thumbnailHeight": 131,
"thumbnailWidth": 127
}
},
{
"kind": "customsearch#result",
"title": "Ramada Limited Vancouver Downtown",
"htmlTitle": "Ramada Limited \u003cb\u003eVancouver\u003c/b\u003e Downtown",
"link": "https://www.google.com/maps/d/thumbnail?mid=1B41Gt1WF8xLcJyfvc38rj8LBKgA&hl=en",
"displayLink": "www.google.com",
"snippet": "Ramada Limited Vancouver Downtown",
"htmlSnippet": "Ramada Limited \u003cb\u003eVancouver\u003c/b\u003e Downtown",
"mime": "image/",
"image": {
"contextLink": "https://www.google.com/mymaps/viewer?mid=1B41Gt1WF8xLcJyfvc38rj8LBKgA&hl=en",
"height": 520,
"width": 504,
"byteSize": 71067,
"thumbnailLink": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_R6h1Kx-ClxwwdjQ96P31JIdEfg_MgFnTA82X3l9T_YwnBHe3NZ30Pd4g",
"thumbnailHeight": 131,
"thumbnailWidth": 127
}
},
{
"kind": "customsearch#result",
"title": "Vancouver Bike Route Stanley Park Seawall",
"htmlTitle": "\u003cb\u003eVancouver\u003c/b\u003e Bike Route Stanley Park Seawall",
"link": "https://www.google.com/maps/d/thumbnail?mid=14dxTKK_5KAhFsRhgdfVm9IBUSFo&hl=en_US",
"displayLink": "www.google.com",
"snippet": "Vancouver Bike Route Stanley Park Seawall",
"htmlSnippet": "\u003cb\u003eVancouver\u003c/b\u003e Bike Route Stanley Park Seawall",
"mime": "image/",
"image": {
"contextLink": "https://www.google.com/mymaps/viewer?mid=14dxTKK_5KAhFsRhgdfVm9IBUSFo&hl=en_US",
"height": 520,
"width": 504,
"byteSize": 56235,
"thumbnailLink": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSXPIwRIMWTkV2awxaXIGDSL0asRPMSGm3LTMPlChkGvfJywWuDY_YwP53F",
"thumbnailHeight": 131,
"thumbnailWidth": 127
}
},
{
"kind": "customsearch#result",
"title": "Gowalla Walking Tour of Vancouver",
"htmlTitle": "Gowalla Walking Tour of \u003cb\u003eVancouver\u003c/b\u003e",
"link": "https://www.google.com/maps/d/thumbnail?mid=18ob0bMMVH84t36U1_A3_jFbcx58&hl=en",
"displayLink": "www.google.com",
"snippet": "Gowalla Walking Tour of Vancouver",
"htmlSnippet": "Gowalla Walking Tour of \u003cb\u003eVancouver\u003c/b\u003e",
"mime": "image/",
"image": {
"contextLink": "https://www.google.com/mymaps/viewer?mid=18ob0bMMVH84t36U1_A3_jFbcx58&hl=en",
"height": 520,
"width": 504,
"byteSize": 54143,
"thumbnailLink": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTmVpAm7SR0tSWPVMibBl3W6yEvYtnup8zn9ccWVvPZNRPF8w9EGM1unBGg",
"thumbnailHeight": 131,
"thumbnailWidth": 127
}
},
{
"kind": "customsearch#result",
"title": "VANCOUVER MURAL FESTIVAL MURAL MAP",
"htmlTitle": "\u003cb\u003eVANCOUVER\u003c/b\u003e MURAL FESTIVAL MURAL MAP",
"link": "https://www.google.com/maps/d/thumbnail?mid=1ur3X4PbXsGyg0aKhNNwEq03itN0&hl=en_US",
"displayLink": "www.google.com",
"snippet": "VANCOUVER MURAL FESTIVAL MURAL MAP",
"htmlSnippet": "\u003cb\u003eVANCOUVER\u003c/b\u003e MURAL FESTIVAL MURAL MAP",
"mime": "image/",
"image": {
"contextLink": "https://www.google.com/mymaps/viewer?mid=1ur3X4PbXsGyg0aKhNNwEq03itN0&hl=en_US",
"height": 520,
"width": 504,
"byteSize": 129311,
"thumbnailLink": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR6DGPUW2U6pDAUmuVz_DR7cxU-LPUdMrOzbN2E0GHE8_FegyyHhvdOSX4V",
"thumbnailHeight": 131,
"thumbnailWidth": 127
}
},
{
"kind": "customsearch#result",
"title": "Best Western Hotel Downtown Vancouver",
"htmlTitle": "Best Western Hotel Downtown \u003cb\u003eVancouver\u003c/b\u003e",
"link": "https://www.google.com/maps/d/thumbnail?mid=1p-nRfVmGJpViUr4zPovQcaSTdeE&hl=en_US",
"displayLink": "www.google.com",
"snippet": "Best Western Hotel Downtown Vancouver",
"htmlSnippet": "Best Western Hotel Downtown \u003cb\u003eVancouver\u003c/b\u003e",
"mime": "image/",
"image": {
"contextLink": "https://www.google.com/mymaps/viewer?mid=1p-nRfVmGJpViUr4zPovQcaSTdeE&hl=en_US",
"height": 520,
"width": 504,
"byteSize": 53972,
"thumbnailLink": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQhQD8cRDrRL2bPYEycxl55FqUCco8vCYkq1pfx4JYXHWXRe_s9Ttzy7Xc",
"thumbnailHeight": 131,
"thumbnailWidth": 127
}
},
{
"kind": "customsearch#result",
"title": "Carmana Plaza Hotel Vancouver",
"htmlTitle": "Carmana Plaza Hotel \u003cb\u003eVancouver\u003c/b\u003e",
"link": "https://www.google.com/maps/d/thumbnail?mid=1qf-nG5qQI0beJIftB7jWRSfIcHw&hl=en",
"displayLink": "www.google.com",
"snippet": "Carmana Plaza Hotel Vancouver",
"htmlSnippet": "Carmana Plaza Hotel \u003cb\u003eVancouver\u003c/b\u003e",
"mime": "image/",
"image": {
"contextLink": "https://www.google.com/mymaps/viewer?mid=1qf-nG5qQI0beJIftB7jWRSfIcHw&hl=en",
"height": 520,
"width": 504,
"byteSize": 56307,
"thumbnailLink": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSEJBHFdUcUqMOLmHXj1acSwI0GLNniL8poTF9xKiIJUFV3US8vDUesTWc",
"thumbnailHeight": 131,
"thumbnailWidth": 127
}
},
{
"kind": "customsearch#result",
"title": "Seismic building risk in Vancouver",
"htmlTitle": "Seismic building risk in \u003cb\u003eVancouver\u003c/b\u003e",
"link": "https://www.google.com/maps/d/thumbnail?mid=1AzDOrFqjnR5qKqAkBnbqGDlbc_8&hl=en_US",
"displayLink": "www.google.com",
"snippet": "Seismic building risk in Vancouver",
"htmlSnippet": "Seismic building risk in \u003cb\u003eVancouver\u003c/b\u003e",
"mime": "image/",
"image": {
"contextLink": "https://www.google.com/mymaps/viewer?mid=1AzDOrFqjnR5qKqAkBnbqGDlbc_8&hl=en_US",
"height": 520,
"width": 504,
"byteSize": 62217,
"thumbnailLink": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvOomFOVNoIc6fVOBhyS9HXh3S5KkbxbvJw2EtkKjlNoVGF0Y7wlU8F9kC",
"thumbnailHeight": 131,
"thumbnailWidth": 127
}
},
{
"kind": "customsearch#result",
"title": "1607- 1420 W. Georgia St, Vancouver",
"htmlTitle": "1607- 1420 W. Georgia St, \u003cb\u003eVancouver\u003c/b\u003e",
"link": "https://www.google.com/maps/d/thumbnail?mid=1b4WGaMzNOARvuejyduraaT-9Nhg&hl=en",
"displayLink": "www.google.com",
"snippet": "1607- 1420 W. Georgia St, Vancouver",
"htmlSnippet": "1607- 1420 W. Georgia St, \u003cb\u003eVancouver\u003c/b\u003e",
"mime": "image/",
"image": {
"contextLink": "https://www.google.com/mymaps/viewer?mid=1b4WGaMzNOARvuejyduraaT-9Nhg&hl=en",
"height": 520,
"width": 504,
"byteSize": 59096,
"thumbnailLink": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQaKK52bEj0-tvFOOJw3kbqZoChXiWeQ9-wLoccNHNHQpOqaKwNSEk4wvM",
"thumbnailHeight": 131,
"thumbnailWidth": 127
}
},
{
"kind": "customsearch#result",
"title": "Correctional Centres in British Columbia",
"htmlTitle": "Correctional Centres in British Columbia",
"link": "https://www.google.com/maps/d/thumbnail?mid=1Xiubw4z5fACCpd5z71ubgUwz5f8&hl=en_US",
"displayLink": "www.google.com",
"snippet": "Correctional Centres in British Columbia",
"htmlSnippet": "Correctional Centres in British Columbia",
"mime": "image/",
"image": {
"contextLink": "https://www.google.com/mymaps/viewer?mid=1Xiubw4z5fACCpd5z71ubgUwz5f8&hl=en_US",
"height": 520,
"width": 504,
"byteSize": 62990,
"thumbnailLink": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTR0gMZSVrF7H2n1JcfXxbZ25ZgOsc7iW2hsYltXGAYP5bwukZCfcNXyKQ",
"thumbnailHeight": 131,
"thumbnailWidth": 127
}
}
]
}
确保您的搜索引擎已正确自定义。
更新您的 search engine 并确保您已启用 image search
您还需要确保在要搜索的网站中至少添加了一个网站（下面我添加了google.com）
然后你会得到这样的回复
{
"kind": "customsearch#search",
"url": {
"type": "application/json",
"template": ""
},
"queries": {
"request": [
{
"title": "Google Custom Search - city",
"totalResults": "297000000",
"searchTerms": "city",
"count": 10,
"startIndex": 1,
"inputEncoding": "utf8",
"outputEncoding": "utf8",
"safe": "off",
"cx": "000938323173939893608:mrtwb_hl8cu"
}
],
"nextPage": [
{
"title": "Google Custom Search - city",
"totalResults": "297000000",
"searchTerms": "city",
"count": 10,
"startIndex": 11,
"inputEncoding": "utf8",
"outputEncoding": "utf8",
"safe": "off",
"cx": "000938323173939893608:mrtwb_hl8cu"
}
]
},
"context": {
"title": "Google"
},
"searchInformation": {
"searchTime": 0.400265,
"formattedSearchTime": "0.40",
"totalResults": "297000000",
"formattedTotalResults": "297,000,000"
},
"items": [
{
"kind": "customsearch#result",
"title": "Yarra City Council Boundary",
"htmlTitle": "Yarra <b>City</b> Council Boundary",
"link": "https://www.google.com/mymaps/viewer?mid=1X8_ONIG08PtjQ--SOiAD9Xk8mM8&hl=en",
"displayLink": "www.google.com",
"snippet": "Yarra City Council Boundary.",
"htmlSnippet": "Yarra <b>City</b> Council Boundary.",
"cacheId": "V02kFnMgkfgJ",
"formattedUrl": "https://www.google.com/mymaps/viewer?mid=1X8...hl=en",
"htmlFormattedUrl": "https://www.google.com/mymaps/viewer?mid=1X8...hl=en",
"pagemap": {
"cse_thumbnail": [
{
"width": "221",
"height": "228",
"src": "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQUjeu8rgqsWGc4u_XkQNcBRull03-9xL9KEUehjmnglOC2op3eS9pkmZ4"
}
],
"website": [
{
"name": "Yarra City Council Boundary",
"description": "Yarra City Council Boundary",
"url": "https://www.google.com/maps/d/viewer?mid=1X8_ONIG08PtjQ--SOiAD9Xk8mM8&hl=en",
"image": "https://www.google.com/maps/d/thumbnail?mid=1X8_ONIG08PtjQ--SOiAD9Xk8mM8&hl=en"
}
],
"metatags": [
{
"viewport": "initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0,width=device-width",
"og:type": "website",
"og:title": "Yarra City Council Boundary",
"og:description": "Yarra City Council Boundary",
"og:url": "https://www.google.com/maps/d/viewer?mid=1X8_ONIG08PtjQ--SOiAD9Xk8mM8&hl=en",
"og:image": "https://www.google.com/maps/d/thumbnail?mid=1X8_ONIG08PtjQ--SOiAD9Xk8mM8&hl=en",
"twitter:card": "summary_large_image",
"twitter:title": "Yarra City Council Boundary",
"twitter:description": "Yarra City Council Boundary",
"twitter:image:src": "https://www.google.com/maps/d/thumbnail?mid=1X8_ONIG08PtjQ--SOiAD9Xk8mM8&hl=en"
}
],
"cse_image": [
{
"src": "https://www.google.com/maps/d/thumbnail?mid=1X8_ONIG08PtjQ--SOiAD9Xk8mM8&hl=en"
}
]
}
},
...
]
}
}
]
}
工作代码
这里有一些代码可以从 pagemap 对象获取图像，如果你看的话
在 imageobject 属性 你会得到你的图片。
// angular to show images
var app = angular.module("app", []);
app.controller("image-query", function($scope) {
$scope.settings = {
async: true,
crossDomain: true,
url: "https://www.googleapis.com/customsearch/v1?",
data: {
key: "AIzaSyAh7eEvk6WpvUXd7gFP0dZnLJNSfiKJ2Us",
cx: "000938323173939893608:evp8tltzv_y"
},
method: "GET"
};
$scope.query = "";
$scope.images = [];
$scope.exts = ["jpg", "png", "jpeg", "gif"];
$scope.updateImages = function() {
$scope.settings.data.q = $scope.query
$.ajax($scope.settings).done(function(res) {
// empty images from last query
$scope.images = [];
var results = res.items;
// image may or may not have imageobject
results.forEach(i => {
if (i.pagemap.imageobject) {
i.pagemap.imageobject.forEach(o => {
if (o.url && $scope.exts.some(ext => o.url.includes(ext))) {
$scope.images.push(o.url);
$scope.$apply();
}
})
}
});
// uncomment to see logged images
// console.dir($scope.images);
})
}
});
#root {
display: flex;
align-items: center;
flex-direction: column;
}
#image-gallery {
width: 100%;
height: 300px;
margin: 10px;
}
#image-gallery li {
list-style-type: none;
display: inline;
overflow-y: scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="root" ng-app="app" ng-controller="image-query">
<h1>Search Images</h1>
<input ng-model="query" id="search" placeholder="search an image" />
<br/>
<button ng-click="updateImages()">Search</button>
<hr width="100%" />
<ul id="image-gallery" height="100%">
<li ng-repeat="img in images track by $index" ng-model="images">
<img height="100px" width="100px" src="{{img}}" />
</li>
</ul>
</div>
我如何获得 JSON 图像 Google 图像 returns 的响应？
我尝试浏览文档，发现 Google 图片 API 已被弃用，取而代之的是 Google 自定义搜索 API。据我了解，Google 自定义搜索允许您在域内而不是整个网络中进行搜索。我尝试进行以下调用，但返回的 JSON 响应没有任何图像 URLS
GET https://www.googleapis.com/customsearch/v1?key={API_KEY}&cx={ENGINE_API}&q=vancouver&searchType=image
{
"kind": "customsearch#search",
"url": {
"type": "application/json",
"template": "https://www.googleapis.com/customsearch/v1?q={searchTerms}&num={count?}&start={startIndex?}&lr={language?}&safe={safe?}&cx={cx?}&sort={sort?}&filter={filter?}&gl={gl?}&cr={cr?}&googlehost={googleHost?}&c2coff={disableCnTwTranslation?}&hq={hq?}&hl={hl?}&siteSearch={siteSearch?}&siteSearchFilter={siteSearchFilter?}&exactTerms={exactTerms?}&excludeTerms={excludeTerms?}&linkSite={linkSite?}&orTerms={orTerms?}&relatedSite={relatedSite?}&dateRestrict={dateRestrict?}&lowRange={lowRange?}&highRange={highRange?}&searchType={searchType}&fileType={fileType?}&rights={rights?}&imgSize={imgSize?}&imgType={imgType?}&imgColorType={imgColorType?}&imgDominantColor={imgDominantColor?}&alt=json"
},
"queries": {
"request": [
{
"title": "Google Custom Search - vancouver",
"totalResults": "14400000",
"searchTerms": "vancouver",
"count": 10,
"startIndex": 1,
"inputEncoding": "utf8",
"outputEncoding": "utf8",
"safe": "off",
"cx": "004087055820537748846:jsb6pxcwlfc",
"searchType": "image"
}
],
"nextPage": [
{
"title": "Google Custom Search - vancouver",
"totalResults": "14400000",
"searchTerms": "vancouver",
"count": 10,
"startIndex": 11,
"inputEncoding": "utf8",
"outputEncoding": "utf8",
"safe": "off",
"cx": "004087055820537748846:jsb6pxcwlfc",
"searchType": "image"
}
]
},
"context": {
"title": "Google"
},
"searchInformation": {
"searchTime": 0.387643,
"formattedSearchTime": "0.39",
"totalResults": "14400000",
"formattedTotalResults": "14,400,000"
},
"items": [
{
"kind": "customsearch#result",
"title": "Gastown in Vancouver",
"htmlTitle": "Gastown in \u003cb\u003eVancouver\u003c/b\u003e",
"link": "https://www.google.com/maps/d/thumbnail?mid=1cjm_9rHpykRpj_ynUSKktJuaVPo&hl=en",
"displayLink": "www.google.com",
"snippet": "Gastown in Vancouver",
"htmlSnippet": "Gastown in \u003cb\u003eVancouver\u003c/b\u003e",
"mime": "image/",
"image": {
"contextLink": "https://www.google.com/mymaps/viewer?mid=1cjm_9rHpykRpj_ynUSKktJuaVPo&hl=en",
"height": 520,
"width": 504,
"byteSize": 65000,
"thumbnailLink": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTM1MMx7p1iq8mIIAGQ9vhOq3jCO5DfD2Hg0JxDIP-xv_te-5y3bJ6aU3Ef",
"thumbnailHeight": 131,
"thumbnailWidth": 127
}
},
{
"kind": "customsearch#result",
"title": "Ramada Limited Vancouver Downtown",
"htmlTitle": "Ramada Limited \u003cb\u003eVancouver\u003c/b\u003e Downtown",
"link": "https://www.google.com/maps/d/thumbnail?mid=1B41Gt1WF8xLcJyfvc38rj8LBKgA&hl=en",
"displayLink": "www.google.com",
"snippet": "Ramada Limited Vancouver Downtown",
"htmlSnippet": "Ramada Limited \u003cb\u003eVancouver\u003c/b\u003e Downtown",
"mime": "image/",
"image": {
"contextLink": "https://www.google.com/mymaps/viewer?mid=1B41Gt1WF8xLcJyfvc38rj8LBKgA&hl=en",
"height": 520,
"width": 504,
"byteSize": 71067,
"thumbnailLink": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_R6h1Kx-ClxwwdjQ96P31JIdEfg_MgFnTA82X3l9T_YwnBHe3NZ30Pd4g",
"thumbnailHeight": 131,
"thumbnailWidth": 127
}
},
{
"kind": "customsearch#result",
"title": "Vancouver Bike Route Stanley Park Seawall",
"htmlTitle": "\u003cb\u003eVancouver\u003c/b\u003e Bike Route Stanley Park Seawall",
"link": "https://www.google.com/maps/d/thumbnail?mid=14dxTKK_5KAhFsRhgdfVm9IBUSFo&hl=en_US",
"displayLink": "www.google.com",
"snippet": "Vancouver Bike Route Stanley Park Seawall",
"htmlSnippet": "\u003cb\u003eVancouver\u003c/b\u003e Bike Route Stanley Park Seawall",
"mime": "image/",
"image": {
"contextLink": "https://www.google.com/mymaps/viewer?mid=14dxTKK_5KAhFsRhgdfVm9IBUSFo&hl=en_US",
"height": 520,
"width": 504,
"byteSize": 56235,
"thumbnailLink": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSXPIwRIMWTkV2awxaXIGDSL0asRPMSGm3LTMPlChkGvfJywWuDY_YwP53F",
"thumbnailHeight": 131,
"thumbnailWidth": 127
}
},
{
"kind": "customsearch#result",
"title": "Gowalla Walking Tour of Vancouver",
"htmlTitle": "Gowalla Walking Tour of \u003cb\u003eVancouver\u003c/b\u003e",
"link": "https://www.google.com/maps/d/thumbnail?mid=18ob0bMMVH84t36U1_A3_jFbcx58&hl=en",
"displayLink": "www.google.com",
"snippet": "Gowalla Walking Tour of Vancouver",
"htmlSnippet": "Gowalla Walking Tour of \u003cb\u003eVancouver\u003c/b\u003e",
"mime": "image/",
"image": {
"contextLink": "https://www.google.com/mymaps/viewer?mid=18ob0bMMVH84t36U1_A3_jFbcx58&hl=en",
"height": 520,
"width": 504,
"byteSize": 54143,
"thumbnailLink": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTmVpAm7SR0tSWPVMibBl3W6yEvYtnup8zn9ccWVvPZNRPF8w9EGM1unBGg",
"thumbnailHeight": 131,
"thumbnailWidth": 127
}
},
{
"kind": "customsearch#result",
"title": "VANCOUVER MURAL FESTIVAL MURAL MAP",
"htmlTitle": "\u003cb\u003eVANCOUVER\u003c/b\u003e MURAL FESTIVAL MURAL MAP",
"link": "https://www.google.com/maps/d/thumbnail?mid=1ur3X4PbXsGyg0aKhNNwEq03itN0&hl=en_US",
"displayLink": "www.google.com",
"snippet": "VANCOUVER MURAL FESTIVAL MURAL MAP",
"htmlSnippet": "\u003cb\u003eVANCOUVER\u003c/b\u003e MURAL FESTIVAL MURAL MAP",
"mime": "image/",
"image": {
"contextLink": "https://www.google.com/mymaps/viewer?mid=1ur3X4PbXsGyg0aKhNNwEq03itN0&hl=en_US",
"height": 520,
"width": 504,
"byteSize": 129311,
"thumbnailLink": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR6DGPUW2U6pDAUmuVz_DR7cxU-LPUdMrOzbN2E0GHE8_FegyyHhvdOSX4V",
"thumbnailHeight": 131,
"thumbnailWidth": 127
}
},
{
"kind": "customsearch#result",
"title": "Best Western Hotel Downtown Vancouver",
"htmlTitle": "Best Western Hotel Downtown \u003cb\u003eVancouver\u003c/b\u003e",
"link": "https://www.google.com/maps/d/thumbnail?mid=1p-nRfVmGJpViUr4zPovQcaSTdeE&hl=en_US",
"displayLink": "www.google.com",
"snippet": "Best Western Hotel Downtown Vancouver",
"htmlSnippet": "Best Western Hotel Downtown \u003cb\u003eVancouver\u003c/b\u003e",
"mime": "image/",
"image": {
"contextLink": "https://www.google.com/mymaps/viewer?mid=1p-nRfVmGJpViUr4zPovQcaSTdeE&hl=en_US",
"height": 520,
"width": 504,
"byteSize": 53972,
"thumbnailLink": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQhQD8cRDrRL2bPYEycxl55FqUCco8vCYkq1pfx4JYXHWXRe_s9Ttzy7Xc",
"thumbnailHeight": 131,
"thumbnailWidth": 127
}
},
{
"kind": "customsearch#result",
"title": "Carmana Plaza Hotel Vancouver",
"htmlTitle": "Carmana Plaza Hotel \u003cb\u003eVancouver\u003c/b\u003e",
"link": "https://www.google.com/maps/d/thumbnail?mid=1qf-nG5qQI0beJIftB7jWRSfIcHw&hl=en",
"displayLink": "www.google.com",
"snippet": "Carmana Plaza Hotel Vancouver",
"htmlSnippet": "Carmana Plaza Hotel \u003cb\u003eVancouver\u003c/b\u003e",
"mime": "image/",
"image": {
"contextLink": "https://www.google.com/mymaps/viewer?mid=1qf-nG5qQI0beJIftB7jWRSfIcHw&hl=en",
"height": 520,
"width": 504,
"byteSize": 56307,
"thumbnailLink": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSEJBHFdUcUqMOLmHXj1acSwI0GLNniL8poTF9xKiIJUFV3US8vDUesTWc",
"thumbnailHeight": 131,
"thumbnailWidth": 127
}
},
{
"kind": "customsearch#result",
"title": "Seismic building risk in Vancouver",
"htmlTitle": "Seismic building risk in \u003cb\u003eVancouver\u003c/b\u003e",
"link": "https://www.google.com/maps/d/thumbnail?mid=1AzDOrFqjnR5qKqAkBnbqGDlbc_8&hl=en_US",
"displayLink": "www.google.com",
"snippet": "Seismic building risk in Vancouver",
"htmlSnippet": "Seismic building risk in \u003cb\u003eVancouver\u003c/b\u003e",
"mime": "image/",
"image": {
"contextLink": "https://www.google.com/mymaps/viewer?mid=1AzDOrFqjnR5qKqAkBnbqGDlbc_8&hl=en_US",
"height": 520,
"width": 504,
"byteSize": 62217,
"thumbnailLink": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvOomFOVNoIc6fVOBhyS9HXh3S5KkbxbvJw2EtkKjlNoVGF0Y7wlU8F9kC",
"thumbnailHeight": 131,
"thumbnailWidth": 127
}
},
{
"kind": "customsearch#result",
"title": "1607- 1420 W. Georgia St, Vancouver",
"htmlTitle": "1607- 1420 W. Georgia St, \u003cb\u003eVancouver\u003c/b\u003e",
"link": "https://www.google.com/maps/d/thumbnail?mid=1b4WGaMzNOARvuejyduraaT-9Nhg&hl=en",
"displayLink": "www.google.com",
"snippet": "1607- 1420 W. Georgia St, Vancouver",
"htmlSnippet": "1607- 1420 W. Georgia St, \u003cb\u003eVancouver\u003c/b\u003e",
"mime": "image/",
"image": {
"contextLink": "https://www.google.com/mymaps/viewer?mid=1b4WGaMzNOARvuejyduraaT-9Nhg&hl=en",
"height": 520,
"width": 504,
"byteSize": 59096,
"thumbnailLink": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQaKK52bEj0-tvFOOJw3kbqZoChXiWeQ9-wLoccNHNHQpOqaKwNSEk4wvM",
"thumbnailHeight": 131,
"thumbnailWidth": 127
}
},
{
"kind": "customsearch#result",
"title": "Correctional Centres in British Columbia",
"htmlTitle": "Correctional Centres in British Columbia",
"link": "https://www.google.com/maps/d/thumbnail?mid=1Xiubw4z5fACCpd5z71ubgUwz5f8&hl=en_US",
"displayLink": "www.google.com",
"snippet": "Correctional Centres in British Columbia",
"htmlSnippet": "Correctional Centres in British Columbia",
"mime": "image/",
"image": {
"contextLink": "https://www.google.com/mymaps/viewer?mid=1Xiubw4z5fACCpd5z71ubgUwz5f8&hl=en_US",
"height": 520,
"width": 504,
"byteSize": 62990,
"thumbnailLink": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTR0gMZSVrF7H2n1JcfXxbZ25ZgOsc7iW2hsYltXGAYP5bwukZCfcNXyKQ",
"thumbnailHeight": 131,
"thumbnailWidth": 127
}
}
]
}
确保您的搜索引擎已正确自定义。
更新您的 search engine 并确保您已启用 image search
您还需要确保在要搜索的网站中至少添加了一个网站（下面我添加了google.com）
然后你会得到这样的回复
{
"kind": "customsearch#search",
"url": {
"type": "application/json",
"template": ""
},
"queries": {
"request": [
{
"title": "Google Custom Search - city",
"totalResults": "297000000",
"searchTerms": "city",
"count": 10,
"startIndex": 1,
"inputEncoding": "utf8",
"outputEncoding": "utf8",
"safe": "off",
"cx": "000938323173939893608:mrtwb_hl8cu"
}
],
"nextPage": [
{
"title": "Google Custom Search - city",
"totalResults": "297000000",
"searchTerms": "city",
"count": 10,
"startIndex": 11,
"inputEncoding": "utf8",
"outputEncoding": "utf8",
"safe": "off",
"cx": "000938323173939893608:mrtwb_hl8cu"
}
]
},
"context": {
"title": "Google"
},
"searchInformation": {
"searchTime": 0.400265,
"formattedSearchTime": "0.40",
"totalResults": "297000000",
"formattedTotalResults": "297,000,000"
},
"items": [
{
"kind": "customsearch#result",
"title": "Yarra City Council Boundary",
"htmlTitle": "Yarra <b>City</b> Council Boundary",
"link": "https://www.google.com/mymaps/viewer?mid=1X8_ONIG08PtjQ--SOiAD9Xk8mM8&hl=en",
"displayLink": "www.google.com",
"snippet": "Yarra City Council Boundary.",
"htmlSnippet": "Yarra <b>City</b> Council Boundary.",
"cacheId": "V02kFnMgkfgJ",
"formattedUrl": "https://www.google.com/mymaps/viewer?mid=1X8...hl=en",
"htmlFormattedUrl": "https://www.google.com/mymaps/viewer?mid=1X8...hl=en",
"pagemap": {
"cse_thumbnail": [
{
"width": "221",
"height": "228",
"src": "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQUjeu8rgqsWGc4u_XkQNcBRull03-9xL9KEUehjmnglOC2op3eS9pkmZ4"
}
],
"website": [
{
"name": "Yarra City Council Boundary",
"description": "Yarra City Council Boundary",
"url": "https://www.google.com/maps/d/viewer?mid=1X8_ONIG08PtjQ--SOiAD9Xk8mM8&hl=en",
"image": "https://www.google.com/maps/d/thumbnail?mid=1X8_ONIG08PtjQ--SOiAD9Xk8mM8&hl=en"
}
],
"metatags": [
{
"viewport": "initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0,width=device-width",
"og:type": "website",
"og:title": "Yarra City Council Boundary",
"og:description": "Yarra City Council Boundary",
"og:url": "https://www.google.com/maps/d/viewer?mid=1X8_ONIG08PtjQ--SOiAD9Xk8mM8&hl=en",
"og:image": "https://www.google.com/maps/d/thumbnail?mid=1X8_ONIG08PtjQ--SOiAD9Xk8mM8&hl=en",
"twitter:card": "summary_large_image",
"twitter:title": "Yarra City Council Boundary",
"twitter:description": "Yarra City Council Boundary",
"twitter:image:src": "https://www.google.com/maps/d/thumbnail?mid=1X8_ONIG08PtjQ--SOiAD9Xk8mM8&hl=en"
}
],
"cse_image": [
{
"src": "https://www.google.com/maps/d/thumbnail?mid=1X8_ONIG08PtjQ--SOiAD9Xk8mM8&hl=en"
}
]
}
},
...
]
}
}
]
}
工作代码
这里有一些代码可以从 pagemap 对象获取图像，如果你看的话
在 imageobject 属性 你会得到你的图片。
// angular to show images
var app = angular.module("app", []);
app.controller("image-query", function($scope) {
$scope.settings = {
async: true,
crossDomain: true,
url: "https://www.googleapis.com/customsearch/v1?",
data: {
key: "AIzaSyAh7eEvk6WpvUXd7gFP0dZnLJNSfiKJ2Us",
cx: "000938323173939893608:evp8tltzv_y"
},
method: "GET"
};
$scope.query = "";
$scope.images = [];
$scope.exts = ["jpg", "png", "jpeg", "gif"];
$scope.updateImages = function() {
$scope.settings.data.q = $scope.query
$.ajax($scope.settings).done(function(res) {
// empty images from last query
$scope.images = [];
var results = res.items;
// image may or may not have imageobject
results.forEach(i => {
if (i.pagemap.imageobject) {
i.pagemap.imageobject.forEach(o => {
if (o.url && $scope.exts.some(ext => o.url.includes(ext))) {
$scope.images.push(o.url);
$scope.$apply();
}
})
}
});
// uncomment to see logged images
// console.dir($scope.images);
})
}
});
#root {
display: flex;
align-items: center;
flex-direction: column;
}
#image-gallery {
width: 100%;
height: 300px;
margin: 10px;
}
#image-gallery li {
list-style-type: none;
display: inline;
overflow-y: scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="root" ng-app="app" ng-controller="image-query">
<h1>Search Images</h1>
<input ng-model="query" id="search" placeholder="search an image" />
<br/>
<button ng-click="updateImages()">Search</button>
<hr width="100%" />
<ul id="image-gallery" height="100%">
<li ng-repeat="img in images track by $index" ng-model="images">
<img height="100px" width="100px" src="{{img}}" />
</li>
</ul>
</div>