התכונה 'חיפוש טקסט' (חדש) מקבלת שאילתת טקסט ומחזירה רשימה של מקומות תואמים.
Text Search (חדש) מחזיר מידע על קבוצה של מקומות על סמך מחרוזת, לדוגמה "פיצה בתל אביב" או "חנויות נעליים ליד חיפה" או "הרצל 12". השירות מגיב עם רשימה של מקומות שתואמים למחרוזת הטקסט וכל הטיה של המיקום שהוגדרה. התכונה 'חיפוש טקסט' (חדש) מאפשרת לך לחפש מקומות לפי סוג, לסנן באמצעות קריטריונים כמו שעות פעילות ודירוג, ולהגביל או להטות את התוצאות למיקום ספציפי.
כדי להשתמש בחיפוש טקסט (חדש), צריך להפעיל את Places API (חדש) בפרויקט ב-Google Cloud. פרטים נוספים זמינים במאמר תחילת העבודה.
חיפוש מקומות לפי שאילתת טקסט
אפשר להתקשר למספר searchByText
כדי להחזיר רשימה של מקומות משאילתת טקסט או ממספר טלפון.
מציינים פרמטרים של חיפוש באמצעות בקשה, ולאחר מכן מבצעים קריאה ל-searchByText
. התוצאות מוחזרות כרשימה של Place
אובייקטים, שמתוכם אפשר לקבל את פרטי המקום. קטע הקוד הבא מציג דוגמה לבקשה ולקריאה לפונקציה searchByText
:
TypeScript
const request = { textQuery: 'Tacos in Mountain View', fields: ['displayName', 'location', 'businessStatus'], includedType: 'restaurant', locationBias: { lat: 37.4161493, lng: -122.0812166 }, isOpenNow: true, language: 'en-US', maxResultCount: 8, minRating: 3.2, region: 'us', useStrictTypeFiltering: false, }; //@ts-ignore const { places } = await Place.searchByText(request);
JavaScript
const request = { textQuery: "Tacos in Mountain View", fields: ["displayName", "location", "businessStatus"], includedType: "restaurant", locationBias: { lat: 37.4161493, lng: -122.0812166 }, isOpenNow: true, language: "en-US", maxResultCount: 8, minRating: 3.2, region: "us", useStrictTypeFiltering: false, }; //@ts-ignore const { places } = await Place.searchByText(request);
- מציינים שאילתת טקסט או מספר טלפון שרוצים לחפש באמצעות הפרמטר
textQuery
. - משתמשים בפרמטר
fields
(חובה) כדי לציין רשימה מופרדת בפסיקים של שדה נתונים אחד או יותר באותיות גמל. - יש להשתמש בפרמטר
includedType
כדי להחזיר רק תוצאות מהסוג שצוין. - אפשר להשתמש ב
locationBias
או בlocationRestriction
כדי להטות או להגביל את תוצאות חיפוש הטקסט לאזור ספציפי.
אם השאילתה מכילה מספר טלפון, יש להגדיר את פרמטר האזור. לדוגמה, אם
משתמשים במספר טלפון כדי לחפש מקום ביפן, והדומיין שממנו נשלחה הבקשה הוא jp
,
צריך להגדיר את הפרמטר region
ל-'jp'. אם השדה region
יושמט מהבקשה, ברירת המחדל של ה-API היא 'אזור ארצות הברית'.
Place
אובייקטים, שמתוכם אפשר לקבל
פרטי מקום.
דוגמה
בדוגמה הבאה נשתמש ב-searchByText
כדי לבצע שאילתה לגבי מסעדות טאקו באזור מאונטיין ויו, ותאכלס מפה עם סמנים להצגת התוצאות.
TypeScript
let map; let center; async function initMap() { const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; center = { lat: 37.4161493, lng: -122.0812166 }; map = new Map(document.getElementById('map') as HTMLElement, { center: center, zoom: 11, mapId: 'DEMO_MAP_ID', }); findPlaces(); } async function findPlaces() { const { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary; const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; const request = { textQuery: 'Tacos in Mountain View', fields: ['displayName', 'location', 'businessStatus'], includedType: 'restaurant', locationBias: { lat: 37.4161493, lng: -122.0812166 }, isOpenNow: true, language: 'en-US', maxResultCount: 8, minRating: 3.2, region: 'us', useStrictTypeFiltering: false, }; //@ts-ignore const { places } = await Place.searchByText(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; let center; async function initMap() { const { Map } = await google.maps.importLibrary("maps"); center = { lat: 37.4161493, lng: -122.0812166 }; map = new Map(document.getElementById("map"), { center: center, zoom: 11, mapId: "DEMO_MAP_ID", }); findPlaces(); } async function findPlaces() { const { Place } = await google.maps.importLibrary("places"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); const request = { textQuery: "Tacos in Mountain View", fields: ["displayName", "location", "businessStatus"], includedType: "restaurant", locationBias: { lat: 37.4161493, lng: -122.0812166 }, isOpenNow: true, language: "en-US", maxResultCount: 8, minRating: 3.2, region: "us", useStrictTypeFiltering: false, }; //@ts-ignore const { places } = await Place.searchByText(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>Text Search</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <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: "weekly"});</script> </body> </html>