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

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

การค้นหาข้อความ (ใหม่) จะใช้ข้อความค้นหาและแสดงรายการข้อความที่ตรงกัน สถานที่

การค้นหาข้อความ (ใหม่) จะแสดงข้อมูลเกี่ยวกับชุดของ สถานที่ตามสตริง เช่น "พิซซ่าในกรุงเทพ" หรือ "ร้านรองเท้าใกล้อตตาวา" หรือ "123 Main Street" บริการจะตอบกลับด้วยรายการตำแหน่งที่ตรงกับสตริงข้อความและ ความเอนเอียงของตำแหน่งที่ตั้งไว้แล้ว การค้นหาข้อความ (ใหม่) ช่วยให้คุณค้นหา สถานที่ตามประเภท กรองตามเกณฑ์ เช่น เวลาทำการและคะแนน และจำกัดหรือให้น้ำหนักพิเศษ ผลลัพธ์ไปยังสถานที่ที่ต้องการ

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

หากข้อความค้นหามีหมายเลขโทรศัพท์ ควรตั้งค่าพารามิเตอร์ภูมิภาค ตัวอย่างเช่น หากคุณ ใช้หมายเลขโทรศัพท์เพื่อค้นหาสถานที่ในญี่ปุ่น และโดเมนที่ส่งคำขอคือ jp คุณต้องตั้งค่าพารามิเตอร์ region เป็น "jp" หากละเว้น region จาก API จะมีค่าเริ่มต้นเป็นภูมิภาคสหรัฐอเมริกา ("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

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