文本搜索(新)可接受文本查询并返回匹配的地点的列表。
文本搜索(新)可以根据一个字符串(例如,“北京烤鸭”“南京附近的鞋店”或“长安街 8 号”)返回一组地点的相关信息。该服务会返回一列与所指定的文本字符串和任何位置偏向设置相匹配的地点。通过文本搜索(新版),您可以按类型搜索地点,使用营业时间和评分等条件进行过滤,还可以使结果限制在或偏向于特定位置。
若要使用文本搜索(新),您必须在 Google Cloud 项目中启用“Places API(新)”。如需了解详情,请参阅开始使用。
通过文本查询查找地点
调用 searchByText
即可根据文本查询或电话号码返回地点列表。
请使用请求指定搜索参数,然后调用 searchByText()
。返回的结果将会是一个 Place
对象列表,您可以从中获取地点详情。以下代码段显示了一个请求和 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);
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);
- 使用
textQuery
参数指定要搜索的文本查询或电话号码。 fields
参数(必需)用于指定一个逗号分隔列表,其中包含一个或多个采用驼峰命名法的数据字段。- 使用
includedType
参数可仅返回指定类型的结果。 - 使用
locationBias
或locationRestriction
可将文本搜索结果偏向于或限制在特定区域。
如果查询内容中包含电话号码,则应设置 region 参数。例如,如果您使用电话号码搜索日本的某个地点,而发出请求的网域是 jp
,则必须将 region
参数设置为“jp”。如果请求中省略了 region
,该 API 会默认设为美国 (us) 区域。
Place
对象列表,您可以从中获取地点详情。示例
以下示例使用 searchByText
来查询 Mountain View 附近的炸玉米饼餐厅,并在地图中填充标记来显示结果。
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();
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();
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; }
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>