【问题标题】:getting place name from Json using google API使用谷歌 API 从 Json 获取地名
【发布时间】:2012-01-23 09:30:14
【问题描述】:

当我运行此代码时,我得到一个空白屏幕,没有显示任何内容。我必须进行哪些更改才能正确执行此操作,我哪里出错了?

     <html>
     <head>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script> 
   <script>
   $(document).ready(function() {
   $.getJSON("https://maps.googleapis.com/maps/api/place/search/json?location=-33.8670522,151.1957362&radius=500&types=food&name=harbour&sensor=false&key=AIzaSyC1BIAzM34uk6SLY40s-nmXMivPJDfWgTc",
  function(data, textStatus){
alert(data);
  $.each(data.results,function(i, name) {;
   $("#placenames").append(i+':'+name.vicinity+'<br/>');
 });
});
});
 </script>
 </head>
  <body> 
  <div id="placenames"></div>
  </body>
  </html>

【问题讨论】:

    标签: java javascript ajax html


    【解决方案1】:

    您是否尝试过使用Google Maps Javascript API?它为您完成所有 JSONP 的工作。

    这是一个带有您的坐标的演示:http://jsfiddle.net/ThinkingStiff/CjfcX/

    脚本:

    var places = new google.maps.places.PlacesService( document.createElement( 'div' ) ),
        searchRequest = {
    
            name: 'harbour',
            location: new google.maps.LatLng( -33.8670522, 151.1957362 ),
            radius: 500,
            types: ['food']
    
        };
    
    places.search( searchRequest, function ( results, status ) {
    
        var html = '';
    
        for ( var index = 0; index < results.length; index++ ) {
    
            html +=
                  '<li '
                + 'data-location-id="' + results[index].id + '" '
                + 'data-address="' + results[index].vicinity + '" '
                + 'data-latitude="' + results[index].geometry.location.lat() + '" '
                + 'data-longitude="' + results[index].geometry.location.lng() + '" '
                + 'data-name="' + results[index].name + '">'
                + '<div>' + results[index].name + '</div>'
                + '<div>' + results[index].vicinity + '</div>'
                + '</li>';
    
        };
    
        document.getElementById( 'results' ).innerHTML = html;
    
    } );
    

    HTML:

    <script src="http://maps.googleapis.com/maps/api/js?libraries=places,geometry&sensor=true"></script>
    <ul id="results"></ul>
    

    输出:

    【讨论】:

    • 酷 - 你是怎么得到你的签名的? - 现在请删除您的反对票,我澄清了不支持 JSONP 的意思。谢谢
    • @mplungjan 签名位于 HTML 部分。我每次都是手动做的。已删除反对票。
    • 感谢您的信息 :) 我可以窃取这个想法吗? PS:你的回答比我的详细
    • @mplungjan 当然可以。请把归属地留在那里。不知道为什么 OP 选择了我的答案然后切换到你的答案,但有时就是这样。
    • 情况正好相反。我在你之前几分钟就回答了,当你给出更详细的答案时,我建议他改用你的答案。
    【解决方案2】:

    Google API 目前不支持来自 jQuery get/getJSON 的回调/JSONP

    要加载异步,您需要执行以下操作:

    function loadScript() {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
      document.body.appendChild(script);
    }
    

    http://code.google.com/apis/maps/documentation/javascript/basics.html#Async

    【讨论】:

    【解决方案3】:

    您必须添加此查询字符串,以便将其解析为 jsonp:

    &callback=?
    

    查看这篇博文了解更多信息:

    http://www.mattcashatt.com/post/index/Obtaining-and-Parsing-Open-Social-Graph-Data-with-JSONP-and-jQuery

    【讨论】:

    • 嗨,马修。如何添加 &callback=?你给我写样本。
    • 是的,没错。只需将其添加到您的网址的末尾。如果这对你有用,请接受这个答案是正确的:)。
    • 但是 Google API 目前不支持回调/JSONP
    猜你喜欢
    • 2013-10-24
    • 1970-01-01
    • 2023-03-22
    • 1970-01-01
    • 1970-01-01
    • 2015-09-25
    • 1970-01-01
    • 1970-01-01
    • 2013-09-03
    相关资源
    最近更新 更多