התכונה 'חיפוש בקרבת מקום' (חדש) מקבלת סוג אחד או יותר של מקום, ומחזירה רשימה של מקומות תואמים.
התכונה 'חיפוש בקרבת מקום' (חדש) מחזירה מידע על קבוצת מקומות לפי סוגי המקומות שציינתם. לדוגמה: restaurant
, book_store
או bowling_alley
. השירות משיב עם רשימה של מקומות שתואמים לסוגי המקומות שצוינו, ברדיוס של locationRestriction
שצוין.
כדי להשתמש בתכונה 'חיפוש בקרבת מקום' (חדש), צריך להפעיל את האפשרות Places API (New) בפרויקט ב-Google Cloud. לפרטים נוספים, אפשר לעיין במאמר בנושא תחילת העבודה.
חיפוש מקומות בקרבת מקום
אפשר להתקשר אל searchNearby
כדי להחזיר רשימה של מקומות לפי סוגי המקומות, המיקום והרדיוס שצוינו. צריך לציין את הפרמטרים של החיפוש באמצעות בקשה, ואז להפעיל את הפונקציה searchNearby
.
התוצאות מוחזרות כרשימה של Place
אובייקטים, שמהם תוכלו לקבל פרטי מקום.
קטע הקוד הבא מציג דוגמה לבקשה וקריאה ל-searchNearby
:
TypeScript
// Restrict within the map viewport. let center = new google.maps.LatLng(52.369358, 4.889258); const request = { // required parameters fields: ['displayName', 'location', 'businessStatus'], locationRestriction: { center: center, radius: 500, }, // optional parameters includedPrimaryTypes: ['restaurant'], maxResultCount: 5, rankPreference: SearchNearbyRankPreference.POPULARITY, language: 'en-US', region: 'us', }; //@ts-ignore const { places } = await Place.searchNearby(request);
JavaScript
// Restrict within the map viewport. let center = new google.maps.LatLng(52.369358, 4.889258); const request = { // required parameters fields: ["displayName", "location", "businessStatus"], locationRestriction: { center: center, radius: 500, }, // optional parameters includedPrimaryTypes: ["restaurant"], maxResultCount: 5, rankPreference: SearchNearbyRankPreference.POPULARITY, language: "en-US", region: "us", }; //@ts-ignore const { places } = await Place.searchNearby(request);
- משתמשים בפרמטר
fields
(חובה) כדי לציין רשימה שמופרדת בפסיקים של שדה נתונים אחד או יותר. - משתמשים בפרמטר
locationRestriction
(חובה) כדי לציין רדיוס של עד 50,000 מטר. - משתמשים בפרמטר
includedPrimaryTypes
כדי לציין סוג מקום אחד או יותר שרוצים לחפש. - משתמשים בפרמטר
rankPreference
כדי לצייןSearchNearbyRankPreference
שלPOPULARITY
אוDISTANCE
. - לעיון ברשימת הפרמטרים המלאה
דוגמה
הדוגמה הבאה משתמשת ב-searchNearby
כדי לשלוח שאילתה על מסעדות ברדיוס של 500 מטר מהמרכז, ומאכלסת מפה עם סמנים כדי להציג את התוצאות.
TypeScript
let map; async function initMap() { const { Map, InfoWindow } = await google.maps.importLibrary('maps') as google.maps.MapsLibrary; let center = new google.maps.LatLng(52.369358, 4.889258); map = new Map(document.getElementById('map') as HTMLElement, { center: center, zoom: 11, mapId: 'DEMO_MAP_ID', }); nearbySearch(); } async function nearbySearch() { //@ts-ignore const { Place, SearchNearbyRankPreference } = await google.maps.importLibrary('places') as google.maps.PlacesLibrary; const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; // Restrict within the map viewport. let center = new google.maps.LatLng(52.369358, 4.889258); const request = { // required parameters fields: ['displayName', 'location', 'businessStatus'], locationRestriction: { center: center, radius: 500, }, // optional parameters includedPrimaryTypes: ['restaurant'], maxResultCount: 5, rankPreference: SearchNearbyRankPreference.POPULARITY, language: 'en-US', region: 'us', }; //@ts-ignore const { places } = await Place.searchNearby(request); if (places.length) { console.log(places); const { LatLngBounds } = await google.maps.importLibrary("core") as google.maps.CoreLibrary; const bounds = new LatLngBounds(); // Loop through and get all the results. places.forEach((place) => { const markerView = new AdvancedMarkerElement({ map, position: place.location, title: place.displayName, }); bounds.extend(place.location as google.maps.LatLng); console.log(place); }); map.fitBounds(bounds); } else { console.log("No results"); } } initMap();
JavaScript
let map; async function initMap() { const { Map, InfoWindow } = await google.maps.importLibrary("maps"); let center = new google.maps.LatLng(52.369358, 4.889258); map = new Map(document.getElementById("map"), { center: center, zoom: 11, mapId: "DEMO_MAP_ID", }); nearbySearch(); } async function nearbySearch() { //@ts-ignore const { Place, SearchNearbyRankPreference } = await google.maps.importLibrary( "places", ); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); // Restrict within the map viewport. let center = new google.maps.LatLng(52.369358, 4.889258); const request = { // required parameters fields: ["displayName", "location", "businessStatus"], locationRestriction: { center: center, radius: 500, }, // optional parameters includedPrimaryTypes: ["restaurant"], maxResultCount: 5, rankPreference: SearchNearbyRankPreference.POPULARITY, language: "en-US", region: "us", }; //@ts-ignore const { places } = await Place.searchNearby(request); if (places.length) { console.log(places); const { LatLngBounds } = await google.maps.importLibrary("core"); const bounds = new LatLngBounds(); // Loop through and get all the results. places.forEach((place) => { const markerView = new AdvancedMarkerElement({ map, position: place.location, title: place.displayName, }); bounds.extend(place.location); console.log(place); }); map.fitBounds(bounds); } else { console.log("No results"); } } initMap();
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
HTML
<html> <head> <title>Nearby Search</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- prettier-ignore --> <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script> </body> </html>