Tìm kiếm lân cận

Chọn nền tảng: Android iOS JavaScript Dịch vụ web
Nhà phát triển ở Khu vực kinh tế Châu Âu (EEA)

Tìm kiếm lân cận (Mới) lấy một hoặc nhiều loại địa điểm và trả về danh sách các địa điểm phù hợp.

Nearby Search (Mới) trả về thông tin về một nhóm địa điểm dựa trên các 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 phù hợp với các loại địa điểm được chỉ định trong bán kính của locationRestriction được chỉ định.

Để sử dụng Nearby Search (Mới), bạn phải bật "Places API (Mới)" trên dự án Google Cloud của mình. Hãy xem phần Bắt đầu sử dụng để 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 các loại địa điểm, vị trí và bán kính đã chỉ định. Chỉ định các tham số tìm kiếm bằng một yêu cầu, sau đó gọi searchNearby(). Kết quả được trả về dưới dạng danh sách các đối tượng Place, 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à một 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);
index.ts

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);
index.js
  • Sử dụng tham số fields (bắt buộc) để chỉ định một danh sách được phân tách bằng dấu phẩy gồm một hoặc nhiều trường dữ liệu.
  • Sử dụng tham số locationRestriction (bắt buộc) để chỉ định bán kính tối đa 50.000 mét.
  • Sử dụng tham số includedPrimaryTypes để chỉ định một hoặc nhiều loại địa điểm cần tìm.
  • Sử dụng tham số rankPreference để chỉ định SearchNearbyRankPreference là POPULARITY hoặc DISTANCE.
  • Xem danh sách đầy đủ các thông 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 và điền sẵn các điểm đánh dấu vào bản đồ để cho thấy 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',
        mapTypeControl: false,
    });
    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();
index.ts

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',
        mapTypeControl: false,
    });
    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();
index.js

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>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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "beta"});</script>
  </body>
</html>
index.html

Dùng thử mẫu