การค้นหาสถานที่ใกล้เคียง

เลือกแพลตฟอร์ม แอนดรอยด์ iOS JavaScript บริการผ่านเว็บ

การค้นหาใกล้เคียง (ใหม่) ใช้อย่างน้อย 1 รายการ ประเภทสถานที่ และแสดงรายชื่อสถานที่ที่ตรงกัน

การค้นหาใกล้เคียง (ใหม่) จะแสดงข้อมูลเกี่ยวกับชุดสถานที่ตาม ตามประเภทสถานที่ที่คุณระบุ เช่น 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 (ต้องระบุ) เพื่อระบุรายการที่คั่นด้วยจุลภาคของ ช่องข้อมูลอย่างน้อย 1 ช่อง
  • ใช้พารามิเตอร์ locationRestriction (ต้องระบุ) เพื่อระบุรัศมีไม่เกิน 50,000 เมตร
  • ใช้พารามิเตอร์ includedPrimaryTypes เพื่อระบุอย่างน้อย 1 รายการ ประเภทสถานที่ที่จะค้นหา
  • ใช้พารามิเตอร์ 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

ลองใช้ตัวอย่าง