Tìm kiếm văn bản (Mới)

Tính năng Tìm kiếm văn bản (Mới) nhận một truy vấn dạng văn bản và trả về danh sách các địa điểm phù hợp.

Tìm kiếm văn bản (Mới) trả về thông tin về một tập hợp địa điểm dựa trên một chuỗi – ví dụ: "pizza ở New York" hoặc "cửa hàng giày gần Ottawa" hoặc "123 Main Street". Dịch vụ phản hồi bằng một danh sách các địa điểm khớp với chuỗi văn bản và mọi sai lệch vị trí đã đặt. Tính năng Tìm kiếm văn bản (Mới) cho phép bạn tìm kiếm địa điểm theo loại, lọc theo các tiêu chí như giờ hoạt động và điểm xếp hạng, đồng thời hạn chế hoặc thiên về kết quả theo một địa điểm cụ thể.

Để sử dụng tính năng Tìm kiếm văn bản (Mới), bạn phải bật "API Địa điểm (Mới)" trong dự án Google Cloud của mình. Hãy xem bài viết Bắt đầu để biết thông tin chi tiết.

Tìm địa điểm bằng cụm từ tìm kiếm

Gọi searchByText để trả về danh sách địa điểm từ một truy vấn văn bản hoặc số điện thoại. Hãy chỉ định các tham số tìm kiếm bằng yêu cầu, sau đó gọi searchByText. Kết quả được trả về dưới dạng danh sách đối tượng Place, từ đó bạn có thể lấy thông tin chi tiết về vị trí. Đoạn mã sau đây cho thấy ví dụ về một yêu cầu và lệnh gọi đến 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
  • Chỉ định một truy vấn văn bản hoặc số điện thoại để tìm kiếm bằng tham số textQuery.
  • Sử dụng tham số fields (bắt buộc) để chỉ định danh sách được phân tách bằng dấu phẩy gồm một hoặc nhiều trường dữ liệu theo quy ước viết hoa kiểu lạc đà.
  • Dùng tham số includedType để chỉ trả về các kết quả thuộc loại đã chỉ định.
  • Sử dụng locationBias hoặc locationRestriction để thiên vị hoặc hạn chế kết quả tìm kiếm văn bản ở một khu vực cụ thể.
Xem danh sách đầy đủ các cơ sở lưu trú.

Nếu truy vấn chứa số điện thoại, bạn phải đặt tham số khu vực. Ví dụ: Nếu bạn dùng số điện thoại để tìm kiếm một địa điểm ở Nhật Bản và miền yêu cầu là jp, thì bạn phải đặt tham số region thành "jp". Nếu bạn bỏ qua region trong yêu cầu, API sẽ mặc định sử dụng khu vực "us" ở Hoa Kỳ.

Kết quả được trả về dưới dạng danh sách đối tượng Place, từ đó bạn có thể lấy thông tin chi tiết về vị trí.

Ví dụ:

Ví dụ sau đây sử dụng searchByText để truy vấn các nhà hàng bánh taco ở vùng lân cận Mountain View và điền các điểm đánh dấu vào bản đồ để hiển thị kết quả.

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>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <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

Thử mẫu