Google Maps API v3で特定の半径内のすべてのPOIを検索して表示するにはどうすればよいですか？

私は、他の検索で見つけたので、Googleが間違いなくそれを知っていますが、（私の場合は）すべてのパン屋がサンプルコードに表示されているという問題に直面しています。Google Maps API v3で特定の半径内のすべてのPOIを検索して表示するにはどうすればよいですか？

たとえば、52.543770,13.441250の2つのベーカリーは、指定された半径内にあるものの、表示されません。なぜこれが問題なのですか？私は、Googleの一部ではなく、すべてのパン屋を見つけたいと思っています。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Place searches</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <style> 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
     #map { 
     height: 100%; 
     } 
    </style> 
    <script> 
var map; 
var infowindow; 

function initMap() { 
    var berlin = {lat: 52.540, lng: 13.430}; 

    map = new google.maps.Map(document.getElementById('map'), { 
    center: berlin, 
    zoom: 15 
    }); 

    infowindow = new google.maps.InfoWindow(); 

    var service = new google.maps.places.PlacesService(map); 
    service.nearbySearch({ 
    location: berlin, 
    radius: 2000, 
    types: ['bakery'] 
    }, callback); 
} 

function callback(results, status) { 
    if (status === google.maps.places.PlacesServiceStatus.OK) { 
    for (var i = 0; i < results.length; i++) { 
     createMarker(results[i]); 
    } 
    } 
} 

function createMarker(place) { 
    var placeLoc = place.geometry.location; 
    var marker = new google.maps.Marker({ 
    map: map, 
    position: place.geometry.location 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
    infowindow.setContent(place.name); 
    infowindow.open(map, this); 
    }); 
} 

    </script> 
    </head> 
    <body> 
    <div id="map"></div> 
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&libraries=places&callback=initMap" async defer></script> 
    </body> 
</html>

出典

2016-05-06 JohnnyFromBF

デフォルトでは、Googleではカテゴリごとに20件の検索結果が表示されます。すべての結果にアクセスする必要がある20以上の結果が必要な場合は、placesServiceコールバック関数のpaginationパラメータを使用できます。

だからあなたcallbackがに変更されます。これは、一度にすべての結果が表示されます

function callback(results, status, pagination) { 
    if (status === google.maps.places.PlacesServiceStatus.OK) { 
    for (var i = 0; i < results.length; i++) { 
     createMarker(results[i]); 
    } 
    if (pagination.hasNextPage) 
     pagination.nextPage(); 
    } 
}

。

pagination.nextPage();は、新しい結果セットでcallback関数を再度呼び出します。あなたはGoogle Maps Pagination example

ノートを参照することができます

：これを行うには、あなたのマップは、マーカーで混雑し、使い勝手を傷つけるされる場合があります。一度にすべてのマーカーを表示する代わりに、Moreボタン機能を実装してください（Googleマップのページ区切りの例を参照）。

編集：リクエストオブジェクトにrankBy: google.maps.places.RankBy.DISTANCEプロパティを使用して、最も近い結果を最初に取得することもできます。

EDIT2：これはあなたのリラバッカーベーカリー結果が表示されます

service.nearbySearch({ location: berlin, types: ['bakery'], rankBy: google.maps.places.RankBy.DISTANCE }, callback);

：またradiusプロパティを削除しにrankByプロパティを追加することによって、あなたのリクエストオブジェクトを変更します。場所が正しく表示されますbakery

半径が削除されているため、意図した以上の結果が得られることに注意してください。 Haversine formulaを使用して、検索した場所から場所までの距離を計算し、半径外にある場所を手動で破棄することによって、手動で半径を処理することはできます。 :)

出典

2016-05-06 08:46:07 ihimv

これは素晴らしい答えですが、私は[this]（https://www.google.com/maps/place/Lila+B%C3%A4cker/@52.543802,13.441251）のようなパン屋を見つけましたが動作するようです、21z/data =！4m5！3m4！1s0x0：0x89c2448a69a1423f！8m2！3d52.5438009！4d13.4412414？hl = de-DE）。とにかくありがとう！ – JohnnyFromBF

私は自分自身を手動でチェックしましたが、結果は表示されません。唯一可能な理由は、「ベーカリー」カテゴリに登録されていない可能性がありますが、「レストラン」など他のカテゴリに登録されている可能性があります。 – ihimv

ベーカリーを手動で検索すると表示されます。とにかく、正解をくれました。とても感謝しています！ – JohnnyFromBF

Google Maps API v3で特定の半径内のすべてのPOIを検索して表示するにはどうすればよいですか？

答えて

関連する問題