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

Chọn nền tảng: Android iOS JavaScript Dịch vụ web

Tìm kiếm bằng văn bản (Mới) sẽ lấy một truy vấn văn bản và trả về danh sách các địa điểm khớp.

Tìm kiếm bằng văn bản (Mới) trả về thông tin về một nhóm đị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ụ này phản hồi bằng danh sách các địa điểm khớp với chuỗi văn bản và mọi độ lệch vị trí đã được đặt. Tính năng Tìm kiếm bằng văn bản (Mới) cho phép bạn tìm kiếm địa điểm theo loại, lọc bằng 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ả cho một vị trí 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)" trên dự án Google Cloud. Hãy xem phần Bắt đầu để biết thông tin chi tiết.

Tìm địa điểm theo cụm từ tìm kiếm dạng văn bản

Gọi searchByText để trả về danh sách địa điểm từ cụm từ tìm kiếm dạng văn bản hoặc số điện thoại. Chỉ định các thông số tìm kiếm bằng một 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ề địa điểm. Đ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 cụm từ tìm kiếm dạng văn bản hoặc số điện thoại để tìm kiếm bằng tham số textQuery.
  • Sử dụng thông 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 kiểu camel.
  • Sử dụng tham số includedType để chỉ trả về 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 bằng văn bản ở một khu vực cụ thể.
Xem danh sách đầy đủ các thuộc tính.

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 sử 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 khỏi yêu cầu, API sẽ mặc định là khu vực Hoa Kỳ ("us").

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ề địa điểm.

Ví dụ:

Ví dụ sau đây sử dụng searchByText để truy vấn các nhà hàng taco ở khu vực lân cận Mountain View và điền vào bản đồ các điểm đánh dấu để 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>

    <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