Chi tiết địa điểm (Mới)

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 đối tượng

Đối tượng Place (chứa thông tin về một địa điểm) được trả về một cách linh động bằng tính năng Tìm kiếm bằng văn bản, Tìm kiếm lân cận và Tự động hoàn thành địa điểm. Bạn cũng có thể tạo một đối tượng Place từ mã địa điểm hoặc tên tài nguyên (tên tài nguyên là mã địa điểm có tiền tố places/). Đoạn mã sau đây cho thấy cách tạo một đối tượng Place bằng mã địa điểm: 

// Use a place ID to create a new Place instance.
const place = new Place({
    id: 'ChIJyYB_SZVU2YARR-I1Jjf08F0', // San Diego Zoo
});

Bạn cũng có thể tạo một đối tượng Place từ tên tài nguyên của địa điểm: 

// Use a place resource name to create a new Place instance.
const place = new Place({
  resourceName: 'places/ChIJyYB_SZVU2YARR-I1JRF08F0', // San Diego Zoo
});

Để biết thêm thông tin, hãy xem phần PlaceOptions.

Tìm nạp các trường

Nếu bạn có một đối tượng Place hiện có hoặc mã địa điểm hoặc tên tài nguyên, hãy sử dụng phương thức Place.fetchFields() để nhận thông tin chi tiết về địa điểm đó. Cung cấp danh sách các trường dữ liệu về địa điểm được phân tách bằng dấu phẩy để trả về; chỉ định tên trường theo kiểu chữ lạc đà. Sử dụng đối tượng Place được trả về để lấy dữ liệu cho các trường được yêu cầu.

Ví dụ sau đây sử dụng mã địa điểm để tạo một Place mới, gọi Place.fetchFields() yêu cầu các trường displayName và formattedAddress, đồng thời thêm một điểm đánh dấu vào bản đồ.

TypeScript

async function getPlaceDetails() {
    const { Place } = (await google.maps.importLibrary(
        'places'
    )) as google.maps.PlacesLibrary;
    const { AdvancedMarkerElement } = (await google.maps.importLibrary(
        'marker'
    )) as google.maps.MarkerLibrary;
    // Use place ID to create a new Place instance.
    const place = new Place({
        id: 'ChIJyYB_SZVU2YARR-I1Jjf08F0', // San Diego Zoo
    });

    // Call fetchFields, passing the desired data fields.
    await place.fetchFields({
        fields: [
            'displayName',
            'formattedAddress',
            'location',
            'googleMapsURI',
        ],
    });

    // Add an Advanced Marker
    const marker = new AdvancedMarkerElement({
        map: innerMap,
        position: place.location,
        title: place.displayName,
    });

    // Assemble the info window content.
    const content = document.createElement('div');
    const address = document.createElement('div');
    const placeId = document.createElement('div');
    address.textContent = place.formattedAddress || '';
    placeId.textContent = place.id;
    content.append(placeId, address);

    if (place.googleMapsURI) {
        const link = document.createElement('a');
        link.href = place.googleMapsURI;
        link.target = '_blank';
        link.textContent = 'View Details on Google Maps';
        content.appendChild(link);
    }

    // Display an info window.
    infoWindow.setHeaderContent(place.displayName);
    infoWindow.setContent(content);
    infoWindow.open({
        anchor: marker,
    });
}
index.ts

JavaScript

async function getPlaceDetails() {
    const { Place } = (await google.maps.importLibrary('places'));
    const { AdvancedMarkerElement } = (await google.maps.importLibrary('marker'));
    // Use place ID to create a new Place instance.
    const place = new Place({
        id: 'ChIJyYB_SZVU2YARR-I1Jjf08F0', // San Diego Zoo
    });
    // Call fetchFields, passing the desired data fields.
    await place.fetchFields({
        fields: [
            'displayName',
            'formattedAddress',
            'location',
            'googleMapsURI',
        ],
    });
    // Add an Advanced Marker
    const marker = new AdvancedMarkerElement({
        map: innerMap,
        position: place.location,
        title: place.displayName,
    });
    // Assemble the info window content.
    const content = document.createElement('div');
    const address = document.createElement('div');
    const placeId = document.createElement('div');
    address.textContent = place.formattedAddress || '';
    placeId.textContent = place.id;
    content.append(placeId, address);
    if (place.googleMapsURI) {
        const link = document.createElement('a');
        link.href = place.googleMapsURI;
        link.target = '_blank';
        link.textContent = 'View Details on Google Maps';
        content.appendChild(link);
    }
    // Display an info window.
    infoWindow.setHeaderContent(place.displayName);
    infoWindow.setContent(content);
    infoWindow.open({
        anchor: marker,
    });
}
index.js
Xin lưu ý rằng Map và Place đã được khai báo trước hàm này: 
const { Map } = await google.maps.importLibrary("maps");
const { Place } = await google.maps.importLibrary("places");
 Xem ví dụ hoàn chỉnh