يستخدم ميزة "البحث عن قرب" (جديد) نوعًا واحدًا أو أكثر من الأماكن، ويعرض قائمة بالأماكن المطابقة.
تعرض ميزة "البحث عن قرب" (جديد) معلومات عن مجموعة من الأماكن استنادًا
إلى أنواع الأماكن التي تحدّدها، مثل restaurant
أو book_store
أو bowling_alley
. وتستجيب الخدمة عن طريق عرض قائمة أماكن تطابق أنواع الأماكن المحدّدة ضمن النطاق الجغرافي لنطاق locationRestriction
المحدّد.
لاستخدام ميزة "البحث عن قرب" (ميزة جديدة)، يجب تفعيل ميزة "واجهة برمجة تطبيقات الأماكن (جديدة)" في مشروعك على 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>