Tính năng Tìm kiếm lân cận (Mới) nhận một hoặc nhiều loại địa điểm và trả về danh sách các địa điểm trùng khớp.
Tính năng Tìm kiếm lân cận (Mới) trả về thông tin về một nhóm địa điểm dựa trên loại địa điểm mà bạn chỉ định, ví dụ: restaurant
hoặc book_store
hoặc bowling_alley
. Dịch vụ này sẽ phản hồi bằng một danh sách các địa điểm khớp với các loại địa điểm đã chỉ định trong bán kính của locationRestriction
được chỉ định.
Để sử dụng tính năng Tìm kiếm lân cận (Mới), bạn phải bật "API Địa điểm (Mới)" trong dự án Google Cloud của mình. Hãy xem phần Bắt đầu để biết thông tin chi tiết.
Tìm địa điểm lân cận
Gọi searchNearby
để trả về danh sách các địa điểm dựa trên loại địa điểm, vị trí và bán kính được chỉ định. 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 searchNearby
.
Kết quả được trả về dưới dạng danh sách đối tượng Place
mà từ đó bạn có thể nhận được 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 searchNearby
:
TypeScript
// 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: SearchNearbyRankPreference.POPULARITY, language: 'en-US', region: 'us', }; //@ts-ignore const { places } = await Place.searchNearby(request);
JavaScript
// 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: SearchNearbyRankPreference.POPULARITY, language: "en-US", region: "us", }; //@ts-ignore const { places } = await Place.searchNearby(request);
- Sử dụng tham số
fields
(bắt buộc) để chỉ định danh sách một hoặc nhiều trường dữ liệu được phân tách bằng dấu phẩy. - Sử dụng tham số
locationRestriction
(bắt buộc) để chỉ định bán kính lên tới 50.000 mét. - Dùng tham số
includedPrimaryTypes
để chỉ định một hoặc nhiều loại địa điểm cần tìm kiếm. - Sử dụng tham số
rankPreference
để chỉ địnhSearchNearbyRankPreference
làPOPULARITY
hoặcDISTANCE
. - Xem danh sách đầy đủ các tham số.
Ví dụ:
Ví dụ sau đây sử dụng searchNearby
để truy vấn các nhà hàng trong bán kính 500 mét tính từ trung tâm, sau đó điền sẵn điểm đánh dấu vào bản đồ để hiển thị kết quả.
TypeScript
let map; async function initMap() { const { Map, InfoWindow } = await google.maps.importLibrary('maps') as google.maps.MapsLibrary; let center = new google.maps.LatLng(52.369358, 4.889258); map = new Map(document.getElementById('map') as HTMLElement, { center: center, zoom: 11, mapId: 'DEMO_MAP_ID', }); nearbySearch(); } async function nearbySearch() { //@ts-ignore const { Place, SearchNearbyRankPreference } = await google.maps.importLibrary('places') as google.maps.PlacesLibrary; const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; // 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: SearchNearbyRankPreference.POPULARITY, language: 'en-US', region: 'us', }; //@ts-ignore const { places } = await Place.searchNearby(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; async function initMap() { const { Map, InfoWindow } = await google.maps.importLibrary("maps"); let center = new google.maps.LatLng(52.369358, 4.889258); map = new Map(document.getElementById("map"), { center: center, zoom: 11, mapId: "DEMO_MAP_ID", }); nearbySearch(); } async function nearbySearch() { //@ts-ignore const { Place, SearchNearbyRankPreference } = await google.maps.importLibrary( "places", ); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); // 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: SearchNearbyRankPreference.POPULARITY, language: "en-US", region: "us", }; //@ts-ignore const { places } = await Place.searchNearby(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>Nearby 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: "beta"});</script> </body> </html>