如何在谷歌图片搜索 api v2 中获取图片 url

Question

如何在 Google Image Search API v2 中使用 javascript 或 jQuery 获取图像点击时的图像 url？我没有在 Google Search API v2 文档中找到此信息。请帮我解决这个问题。

<script>

  var renderSearchElement = function() {
   google.search.cse.element.render(
      {
       gname:'gsearch',
       div: "test",
       attributes: {
       disableWebSearch: true,
       enableHistory: true,
       enableImageSearch:true,
       imageSearchResultSetSize:6
       },
       tag: 'search'
      });
      var element = google.search.cse.element.getElement('gsearch');  
      element.execute();
  };
  var myCallback = function() {
    if (document.readyState == 'complete') {
      renderSearchElement();  
    } 
    else {
      google.setOnLoadCallback(renderSearchElement, true);  
    }
  };
  window.__gcse = {
    parsetags: 'explicit',
    callback: myCallback
  };
   (function() {
    var cx = '000888210889775888983:tmhkkjoq81m';
    var gcse = document.createElement('script'); 
    gcse.type = 'text/javascript'; gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
})();
</script>   

Answer 1

您可能希望在图像上设置一个侦听器，以便在单击它时报告 url 值。这意味着你需要用你自己的版本覆盖默认的 cse 图像，并附加监听器。

这里描述了用你自己的覆盖默认结果模板的过程（一些代码已经过时，但一般的东西工作）在这里描述：https://developers.google.com/custom-search/docs/js/rendering

只需要覆盖缩略图部分，例如：

<div id="my_thumbnail">
    <div data-attr="0" data-vars="{tn:(Vars.cseThumbnail && cseThumbnail.src)
        ? cseThumbnail : (
            (Vars.thumbnail && thumbnail.src)
                ? thumbnail : {src:Vars.document && document.thumbnailUrl})}">
      <div data-if="tn.src">
        <a class="gs-image" data-attr="{href:url,target:target}" onclick="alert(this)">
          <img data-if="!tn.width || !tn.height || tn.width >= tn.height * 7 / 5" class="gs-image"
            data-attr="{src:tn.src}"
            onload="if (this.parentNode && this.parentNode.parentNode && this.parentNode.parentNode.parentNode) {
                      this.parentNode.parentNode.parentNode.style.display = '';
                      this.parentNode.parentNode.className = 'gs-image-box gs-web-image-box gs-web-image-box-landscape';
                    }
            "/>
          <img data-elif="true" class="gs-image"
            data-attr="{src:tn.src}"
            onload="if (this.parentNode && this.parentNode.parentNode && this.parentNode.parentNode.parentNode) {
                      this.parentNode.parentNode.parentNode.style.display = '';
                      this.parentNode.parentNode.className = 'gs-image-box gs-web-image-box gs-web-image-box-portrait';
                    }
            "/>
        </a>
      </div>
    </div>
  </div>

请注意onclick="alert(this)" 部分 - 这是我添加的与默认 cse 模板相比的唯一区别。您可以更改此 onclick 函数以对 url 做一些更智能的事情，而不仅仅是提醒它。这是一个完整的演示：

http://jsfiddle.net/dhkfZ/