البحث في الأماكن القريبة

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

يأخذ "البحث عن الأماكن المجاورة" (جديد) نوعًا واحدًا أو أكثر من أنواع الأماكن، ويعرض قائمة بالأماكن المطابقة.

تعرِض ميزة "البحث عن الأماكن القريبة" (الميزات الجديدة) معلومات عن مجموعة من الأماكن استنادًا إلى أنواع الأماكن التي تحدّدها، مثل restaurant أو book_store أو bowling_alley. تستجيب الخدمة بقائمة من الأماكن التي تتطابق مع أنواع الأماكن المحدّدة ضمن نطاق locationRestriction المحدّد.

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

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

index.js
  • استخدِم المَعلمة 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();
index.ts

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

تجربة عيّنة