Di chuyển sang Nearby Search mới

Trang này giải thích sự khác biệt giữa tính năng tìm kiếm địa điểm lân cận được sử dụng trong lớp Place (mới) và PlacesService (cũ), đồng thời cung cấp một số đoạn mã để so sánh.

• PlacesService cũ có một phương thức nearbySearch(), cho phép bạn tìm kiếm các địa điểm trong một khu vực cụ thể theo từ khoá hoặc loại.
• Lớp Place có phương thức searchNearby() cho phép bạn tìm kiếm các địa điểm trong một khu vực cụ thể theo loại địa điểm, sử dụng lựa chọn mở rộng về các trường dữ liệu địa điểm và loại địa điểm để linh hoạt hơn.

Bảng sau đây liệt kê một số điểm khác biệt chính trong các phương thức tìm kiếm lân cận giữa lớp Place và PlacesService:

So sánh mã

Phần này so sánh mã cho các phương thức tìm kiếm lân cận để minh hoạ sự khác biệt giữa Dịch vụ địa điểm và lớp Địa điểm. Các đoạn mã cho thấy mã cần thiết trên từng API tương ứng để tạo yêu cầu tìm kiếm dựa trên văn bản.

Tìm kiếm lân cận (Cũ)

Tính năng Tìm kiếm lân cận cũ cho phép bạn tìm kiếm các địa điểm trong một khu vực cụ thể theo cụm từ tìm kiếm hoặc loại. Không có cách nào để hạn chế nội dung tìm kiếm bằng cách sử dụng các trường dữ liệu về địa điểm, vì vậy, tất cả các trường có sẵn sẽ được trả về cùng với mỗi yêu cầu. Đoạn mã sau đây cho thấy cách gọi nearbySearch() để trả về thông tin về các nhà hàng ở Sydney, Úc. Yêu cầu này là đồng bộ, sử dụng lệnh gọi lại và bao gồm một bước kiểm tra có điều kiện bắt buộc trên PlacesServiceStatus.

let map;
let service;

function initMap() {
  const sydney = new google.maps.LatLng(-33.867, 151.195);

  map = new google.maps.Map(document.getElementById("map"), {
    center: sydney,
    zoom: 15,
  });

  const request = {
    location: sydney,
    radius: '500',
    type: ['restaurant']
  };

  service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, callback);
}

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      createMarker(results[i]);
    }
  }
}

// Helper function to create markers.
function createMarker(place) {
  if (!place.geometry || !place.geometry.location) return;

  const marker = new google.maps.Marker({
    map,
    position: place.geometry.location,
    title: place.name,
  });
}

Tìm hiểu thêm

• Xem tài liệu về tính năng Tìm kiếm xung quanh cũ
• Xem tài liệu tham khảo về searchNearby()

Tìm kiếm lân cận (Mới)

Phiên bản mới của tính năng Tìm kiếm lân cận cải tiến so với phiên bản cũ theo các cách sau:

• Khả năng chỉ định các trường dữ liệu địa điểm cần trả về.
• Việc sử dụng Promises cho phép hoạt động không đồng bộ.
• Không cần kiểm tra trạng thái của PlacesService; bạn có thể sử dụng tính năng xử lý lỗi tiêu chuẩn.

Đoạn mã sau đây cho thấy một hàm tạo yêu cầu Tìm kiếm lân cận cho nhà hàng. Ví dụ này cho thấy cách sử dụng tuỳ chọn rankPreference để xếp hạng kết quả tìm kiếm theo mức độ phổ biến (trong phiên bản trước, thứ hạng được chỉ định bằng tuỳ chọn rankBy). Vì phương thức searchNearby() sử dụng toán tử await nên bạn chỉ có thể sử dụng phương thức này bên trong hàm async.

async function nearbySearch() {
  // Restrict within the map viewport.
  let center = new google.maps.LatLng(52.369358, 4.889258);
  const request = {
    // Required parameters.
    fields: ["displayName", "location", "businessStatus"],
    locationRestriction: {
      center: center,
      radius: 500,
    },
    // Optional parameters.
    includedPrimaryTypes: ["restaurant"],
    maxResultCount: 5,
    rankPreference: google.maps.places.SearchNearbyRankPreference.POPULARITY,
    language: "en-US",
    region: "us",
  };

  const { places } = await google.maps.places.Place.searchNearby(request);

  if (places.length) {
    console.log(places);

    // Create a new bounds, which will be extended with each result.
    const bounds = new google.maps.LatLngBounds();

    // Loop through and get all the results.
    places.forEach((place) => {
      const markerView = new google.maps.marker.AdvancedMarkerElement({
        map,
        position: place.location,
        title: place.displayName,
      });

      bounds.extend(place.location);
      console.log(place);
    });
    map.fitBounds(bounds);
  } else {
    console.log("No results");
  }
}

Tìm hiểu thêm

• Xem mã ví dụ đầy đủ
• Xem tài liệu về tính năng Tìm kiếm xung quanh (Mới)
• Xem tài liệu tham khảo về searchNearby()