90

近くの検索リクエストに Google プレイス ライブラリを使用しようとしています: https://developers.google.com/maps/documentation/javascript/places#place_search_requests

json 応答をプルして html リストに入れたいだけです。結果を地図などに表示したいと思っています。地図は一切使いたくない。しかし、ドキュメントには、マップが必要であると記載されています

service = new google.maps.places.PlacesService(**map**);

PlacesService 関数の引数として渡すため。私が今やっているのは、height:0 のマップを追加することですが、それでも大量のメモリを消費します (私は sencha touch 2 アプリを開発していますが、メモリは重要です)。マップなしで近くの検索リクエストを使用する回避策はありますか? JSONP リクエストをサポートしていないため、Google Places API は使用したくありません。

4

5 に答える 5

101

文書化されているように、PlacesService は結果の属性をレンダリングするマップまたはノードのいずれかを引数として受け入れます。

したがって、マップの代わりにノード (html 要素であるノード) を使用するだけで済みます。

注意: 属性を非表示にすると、場所のポリシーに違反します (マップに属性が表示されるため、引数として使用するとマップも非表示になります)。

これも興味深いかもしれません: Google Places API は TOC に違反していますか?

例：一言で言えば

jQuery を使用している場合:

var service = new google.maps.places.PlacesService($('#tag-id').get(0));

プレーンな Javascript の場合:

var service = new google.maps.places.PlacesService(document.createElement('div'));

次に、サンプル コードの残りの部分を通常どおりに実行します。

  service.nearbySearch(request, callback);

例: 返された詳細の使用

jsFiddle でのこの例のライブ デモ。

注: この例ではjQuery.

<ul class="reviews__content" id="reviews__content">
</ul>
<div id="service-helper"></div>

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_API_KEY_HERE&libraries=places&callback=getRelevantGoogleReviews">
</script>
<script type="text/javascript">
   window.getRelevantGoogleReviews = function(){
     var service = new google.maps.places.PlacesService($('#service-helper').get(0)); // note that it removes the content inside div with tag '#service-helper'

     service.getDetails({
         placeId: 'ChIJAwEf5VFQqEcRollj8j_kqnE'  // get a placeId using https://developers.google.com/places/web-service/place-id
        }, function(place, status) {
            if (status === google.maps.places.PlacesServiceStatus.OK) {
              var resultcontent = '';
              for (i=0; i<place.reviews.length; ++i) {
                //window.alert('Name:' + place.name + '. ID: ' + place.place_id + '. address: ' + place.formatted_address);
                resultcontent += '<li class="reviews__item">'
                resultcontent += '<div class="reviews__review-er">' + place.reviews[i].author_name + '</div>';
                var reviewDate = new Date(place.reviews[i].time * 1000);
                var reviewDateMM = reviewDate.getMonth() + 1;
                var reviewDateFormatted = reviewDate.getDate() + '/' + reviewDateMM + '/' + reviewDate.getFullYear(); 
                resultcontent += '<div class="reviews__review-date">' + reviewDateFormatted + '</div>';
                resultcontent += '<div class="reviews__review-rating reviews__review-rating--' + place.reviews[i].rating +'"></div>';
                if (!!place.reviews[i].text){
                  resultcontent += '<div class="reviews__review-comment">' + place.reviews[i].text + '</div>';
                }
                resultcontent += '</li>'
              }
              $('#reviews__content').append(resultcontent);
            }
        });
    }
</script>
于 2013-01-15T19:40:59.697 に答える