迁移到新版附近搜索

本页介绍了 Place 类（新）和 PlacesService（旧版）中使用的附近搜索功能之间的区别，并提供了一些代码段以供比较。

  • 旧版 PlacesService 具有 nearbySearch() 方法，可让您根据关键字或类型搜索指定区域内的地点。
  • Place 类有一个 searchNearby() 方法，可让您利用更多地点数据字段和地点类型的选择，更灵活地按地点类型搜索指定区域内的地点。

下表列出了 Place 类和 PlacesService 之间附近搜索方法的一些主要区别：

PlacesService（旧版） Place（新）
nearbySearch()
 searchNearby()
PlaceSearchRequest SearchNearbyRequest
需要使用回调来处理结果对象和 google.maps.places.PlacesServiceStatus 响应。 使用 Promise，并以异步方式运行。
需要进行 PlacesServiceStatus 检查。 无需状态检查，可以使用标准错误处理。
仅支持位置偏差。 支持位置偏向和位置限制。
返回所有可用数据字段（部分受支持的字段）；无法限制为仅返回特定字段。 仅返回请求的地点数据字段；Place 类提供经过扩展且定期更新的字段选择。
仅限于一组固定的地点类型。 使用经过扩展且定期更新的地点类型选项。
支持使用关键字进行基于文本的搜索。 不支持基于文本的搜索，请改用文本搜索（新）。

代码比较

本部分比较了附近搜索方法的代码，以说明地点服务和地点类之间的区别。以下代码段显示了各个 API 发出基于文本的搜索请求所需的代码。

附近搜索（旧版）

通过旧版附近地点搜索，您可以根据关键字或类型搜索指定区域内的地点。您无法使用地点数据字段限制搜索，因此系统会在每次请求中返回所有可用字段。以下代码段展示了调用 nearbySearch() 以返回澳大利亚悉尼的餐厅相关信息。该请求是同步的，使用回调，并包含对 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,
  });
}

了解详情

附近搜索（新）

新版附近地点搜索在以下方面对其前身进行了改进：

  • 能够指定要返回的地点数据字段。
  • 使用 Promise 来实现异步操作。
  • 无需检查 PlacesService 的状态；可以改用标准错误处理。

以下代码段展示了一个函数，用于针对餐厅发出附近搜索请求。此示例展示了如何使用 rankPreference 选项按热门程度对搜索结果进行排名（在旧版中，排名是使用 rankBy 选项指定的）。由于 searchNearby() 方法使用 await 运算符，因此只能在 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");
  }
}

了解详情