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 văn bản (Mới) nhận một truy vấn văn bản và trả về một danh sách kết quả trùng khớp địa điểm.

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ụ sẽ 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à bất kỳ thiên vị vị trí đã được đặt. 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 bằng cách sử dụng các tiêu chí như giờ làm việc và xếp hạng, hạn chế hoặc sai lệch kết quả cho một vị trí cụ thể.

Để sử dụ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 trên Google Cloud. 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 các địa điểm từ một truy vấn văn bản hoặc số điện thoại. Chỉ định thông số tìm kiếm bằng cách sử dụng một yêu cầu, rồi gọi searchByText. Kết quả là trả về dưới dạng danh sách đối tượng Place mà từ đó bạn có thể lấy thông tin về địa điểm. Chiến lược phát hành đĩa đơn đ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

Lưu ý: Hãy đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.

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 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 trường dữ liệu khác trong lạc đà trường hợp.
• 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 lệch hoặc hạn chế kết quả tìm kiếm văn bản của bạn đến một khu vực cụ thể.

Xem toàn bộ danh sách 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, bạn phải đặt tham số region thành "jp". Nếu region bị bỏ qua trong yêu cầu, API sẽ được 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 mà bạn có thể lấy từ đó thông tin về địa điểm.

Ví dụ:

Ví dụ sau đây sử dụng searchByText để truy vấn nhà hàng taco trong Vùng lân cận Mountain View và điền sẵ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

Lưu ý: Hãy đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.

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

Lưu ý: JavaScript được biên dịch từ đoạn mã TypeScript.

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

Dùng thử mẫu

JSFiddle.net Google Cloud Shell