البحث النصي (جديد)

اختيار النظام الأساسي: Android iOS JavaScript خدمة الويب

ميزة "البحث النصي" (جديد) تستخدِم طلب بحث نصيًا وتُرجِع قائمة بالمواقع التي تتطابق معه.

تعرِض ميزة "البحث النصي" (جديد) معلومات عن مجموعة من الأماكن استنادًا إلى سلسلة، مثل "بيتزا في القاهرة" أو "متاجر أحذية بالقرب من الإسكندرية" أو "123 شارع الهرم". تستجيب الخدمة بقائمة بالأماكن التي تتطابق مع سلسلة النصوص وأي ميل جغرافي تم ضبطه. تتيح لك ميزة "البحث النصي" (الإصدار الجديد) البحث عن الأماكن حسب النوع، والفلترة باستخدام معايير مثل ساعات العمل والتقييم، وحصر النتائج في موقع جغرافي محدّد أو توجيهها إليه.

لاستخدام ميزة "البحث النصي" (الإصدار الجديد)، يجب تفعيل واجهة برمجة التطبيقات "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);
index.ts

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);

index.js
  • حدِّد طلب بحث نصي أو رقم هاتف للبحث باستخدام المَعلمة textQuery.
  • استخدِم المَعلمة fields (مطلوبة) لتحديد قائمة مفصولة بفواصل لحقل بيانات واحد أو أكثر بتنسيق كتابة camel.
  • استخدِم المَعلمة includedType لعرض النتائج من النوع المحدّد فقط.
  • استخدِم locationBias أو locationRestriction لحصر نتائج البحث النصي في منطقة معيّنة أو توجيهها نحوها.
اطّلِع على القائمة الكاملة للمواقع.

إذا كان الطلب يحتوي على رقم هاتف، يجب ضبط المَعلمة region. على سبيل المثال، إذا كنت تستخدِم رقم هاتف للبحث عن مكان في اليابان وكان النطاق الذي يطلب البيانات هو jp، عليك ضبط المَعلمة region على jp. في حال حذف region من الطلب، ستستخدِم واجهة برمجة التطبيقات تلقائيًا منطقة الولايات المتحدة (us).

يتم عرض النتائج كقائمة بعناصر 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();
index.ts

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();
index.js

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;
}

style.css

HTML

<html>
  <head>
    <title>Text 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: "weekly"});</script>
  </body>
</html>
index.html

تجربة عيّنة