การค้นหาข้อความ (ใหม่)

เลือกแพลตฟอร์ม: 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 (ต้องระบุ) เพื่อระบุรายการฟิลด์ข้อมูลอย่างน้อย 1 รายการที่คั่นด้วยคอมมาในรูปแบบ Camel Case
  • ใช้พารามิเตอร์ includedType เพื่อแสดงเฉพาะผลลัพธ์ประเภทที่ระบุ
  • ใช้ locationBias หรือ locationRestriction เพื่อเอนเอียงหรือจํากัดผลการค้นหาข้อความให้แสดงเฉพาะภูมิภาคที่เฉพาะเจาะจง
ดูรายการที่พักทั้งหมด

หากการค้นหามีหมายเลขโทรศัพท์ คุณควรตั้งค่าพารามิเตอร์ภูมิภาค ตัวอย่างเช่น หากคุณใช้หมายเลขโทรศัพท์เพื่อค้นหาสถานที่ในญี่ปุ่น และโดเมนที่ขอคือ jp คุณต้องตั้งค่าพารามิเตอร์ region เป็น "jp" หากละ region ไว้ในคำขอ ระบบจะกำหนดค่าเริ่มต้นของ API เป็นภูมิภาคสหรัฐอเมริกา ('us')

ระบบจะแสดงผลลัพธ์เป็นรายการออบเจ็กต์ Place ซึ่งคุณใช้ดูรายละเอียดสถานที่ได้

ตัวอย่าง

ตัวอย่างต่อไปนี้ใช้ searchByText เพื่อค้นหาร้านอาหารทาโก้ในบริเวณใกล้เคียงของ Mountain View และแสดงแผนที่พร้อมเครื่องหมายเพื่อแสดงผลลัพธ์

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

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