Trang này được dịch bởi Cloud Translation API.

Xây dựng dịch vụ tìm kiếm doanh nghiệp lân cận bằng Nền tảng Google Maps (JavaScript)

1. Trước khi bắt đầu

Tìm hiểu cách sử dụng API Bản đồ và Địa điểm của Nền tảng Google Maps để tạo một tính năng tìm kiếm doanh nghiệp địa phương, giúp định vị người dùng và cho thấy các địa điểm thú vị ở gần. Ứng dụng này tích hợp tính năng định vị địa lý, Chi tiết về địa điểm, Ảnh địa điểm và nhiều tính năng khác.

Điều kiện tiên quyết

Kiến thức cơ bản về HTML, CSS và JavaScript
Một dự án có tài khoản thanh toán (làm theo hướng dẫn ở bước tiếp theo nếu bạn chưa có tài khoản này).
Đối với bước bật bên dưới, bạn cần bật Maps JavaScript API và Places API.
Khoá API cho dự án ở trên.

Bắt đầu sử dụng Nền tảng Google Maps

Nếu bạn chưa từng sử dụng Nền tảng Google Maps, hãy làm theo hướng dẫn Bắt đầu sử dụng Nền tảng Google Maps hoặc xem danh sách phát Bắt đầu sử dụng Nền tảng Google Maps để hoàn tất các bước sau:

Tạo tài khoản thanh toán.
Tạo dự án.
Bật các API và SDK của Nền tảng Google Maps (được liệt kê trong phần trước).
Tạo khoá API.

Bạn sẽ thực hiện

Tạo trang web hiển thị bản đồ của Google
Đặt vị trí của người dùng làm trung tâm bản đồ
Tìm địa điểm lân cận và hiển thị kết quả dưới dạng các điểm đánh dấu có thể nhấp vào
Tìm nạp và hiện thêm thông tin chi tiết về từng địa điểm

Bạn cần có

Một trình duyệt web, chẳng hạn như Google Chrome (nên dùng), Firefox, Safari hoặc Internet Explorer
Trình soạn thảo văn bản hoặc mã mà bạn yêu thích

Nhận mã mẫu

Mở giao diện dòng lệnh (Terminal trên MacOS hoặc Command Prompt trên Windows) rồi tải mã mẫu xuống bằng lệnh sau:

git clone https://github.com/googlecodelabs/google-maps-nearby-search-js/

Nếu cách đó không hiệu quả, hãy nhấp vào nút sau đây để tải tất cả mã dành cho lớp học lập trình này xuống, sau đó giải nén tệp:

Tải mã xuống

Thay đổi thành thư mục mà bạn vừa sao chép hoặc tải xuống.

cd google-maps-nearby-search-js

Các thư mục stepN chứa trạng thái cuối cùng mong muốn của từng bước trong lớp học lập trình này. Các thông tin này chỉ mang tính tham khảo. Thực hiện tất cả công việc lập trình trong thư mục có tên là work.

2. Tạo bản đồ có tâm mặc định

Có 3 bước để tạo bản đồ Google trên trang web của bạn:

Tạo trang HTML
Thêm bản đồ
Dán khoá API

1. Tạo trang HTML

Dưới đây là bản đồ được tạo trong bước này. Bản đồ được đặt ở giữa Nhà hát Opera Sydney tại Sydney, Úc. Nếu người dùng từ chối cấp quyền truy cập vào vị trí của họ, bản đồ sẽ mặc định chuyển đến vị trí này và vẫn cung cấp kết quả tìm kiếm thú vị.

Thay đổi thư mục thành thư mục work/. Trong phần còn lại của lớp học lập trình, hãy chỉnh sửa phiên bản trong thư mục work/.

cd work

Trong thư mục work/, hãy dùng trình chỉnh sửa văn bản để tạo một tệp trống có tên là index.html.
Sao chép mã sau vào index.html.

index.html

<!DOCTYPE html>
<html>

<head>
  <title>Sushi Finder</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <style>
    /* Always set the map height explicitly to define the size of the div
     * element that contains the map. */
    #map {
      height: 100%;
      background-color: grey;
    }

    /* Optional: Makes the sample page fill the window. */
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }

    /* TODO: Step 4A1: Make a generic sidebar. */
  </style>
</head>

<body>
  <!-- TODO: Step 4A2: Add a generic sidebar -->

  <!-- Map appears here -->
  <div id="map"></div>

  <!-- TODO: Step 1B, Add a map -->
</body>

</html>

Mở tệp index.html trong trình duyệt web.

open index.html

2. Thêm bản đồ

Phần này hướng dẫn bạn cách tải API JavaScript của Maps vào trang web và viết JavaScript của riêng bạn để sử dụng API này nhằm thêm bản đồ vào trang web.

Thêm mã tập lệnh này vào vị trí mà bạn thấy  sau thẻ map div và trước thẻ đóng </body>.

step1/index.html

<!-- TODO: Step 1B, Add a map -->
<script>
    /* Note: This example requires that you consent to location sharing when
     * prompted by your browser. If you see the error "Geolocation permission
     * denied.", it means you probably did not give permission for the browser * to locate you. */

    /* TODO: Step 2, Geolocate your user
     * Replace the code from here to the END TODO comment with new code from
     * codelab instructions. */
    let pos;
    let map;
    function initMap() {
        // Set the default location and initialize all variables
        pos = {lat: -33.857, lng: 151.213};
        map = new google.maps.Map(document.getElementById('map'), {
            center: pos,
            zoom: 15
        });
    }
    /* END TODO: Step 2, Geolocate your user */
</script>

<!-- TODO: Step 1C, Get an API key -->
<!-- TODO: Step 3A, Load the Places Library -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

3. Dán khoá API

Trong dòng sau , hãy sao chép và thay thế giá trị của tham số khoá trong URL nguồn tập lệnh bằng khoá API mà bạn đã tạo trong phần điều kiện tiên quyết.

step1/index.html

<!-- TODO: Step 1C, Get an API key -->
<!-- TODO: Step 3A, Load the Places Library -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

Lưu tệp HTML mà bạn đang chỉnh sửa.

Thử nghiệm

Tải lại chế độ xem tệp mà bạn đang chỉnh sửa trên trình duyệt. Giờ đây, bạn sẽ thấy một bản đồ xuất hiện ở vị trí của hình chữ nhật màu xám trước đó. Nếu bạn thấy thông báo lỗi, hãy đảm bảo rằng bạn đã thay thế "YOUR_API_KEY" trong thẻ <script> cuối cùng bằng khoá API của riêng bạn. Hãy xem phần trên để biết cách lấy khoá API nếu bạn chưa có.

Mã mẫu đầy đủ

Bạn có thể xem toàn bộ mã của dự án này cho đến thời điểm này trên Github.

3. Xác định vị trí địa lý của người dùng

Tiếp theo, bạn muốn hiển thị vị trí địa lý của người dùng hoặc thiết bị trên bản đồ Google bằng cách sử dụng tính năng Vị trí địa lý HTML5 của trình duyệt cùng với Maps JavaScript API.

Dưới đây là ví dụ về bản đồ hiển thị vị trí địa lý của bạn nếu bạn đang duyệt web ở Mountain View, California:

Định vị địa lý là gì?

Vị trí địa lý là thông tin xác định vị trí địa lý của người dùng hoặc thiết bị điện toán thông qua nhiều cơ chế thu thập dữ liệu. Thông thường, hầu hết các dịch vụ định vị địa lý đều sử dụng địa chỉ định tuyến mạng hoặc thiết bị GPS nội bộ để xác định vị trí này. Ứng dụng này sử dụng thuộc tính navigator.geolocation theo tiêu chuẩn W3C Geolocation của trình duyệt web để xác định vị trí của người dùng.

Hãy tự trải nghiệm

Thay thế mã giữa các chú thích TODO: Step 2, Geolocate your user và END TODO: Step 2, Geolocate your user bằng mã sau:

step2/index.html

/* TODO: Step 2, Geolocate your user
    * Replace the code from here to the END TODO comment with this code
    * from codelab instructions. */
let pos;
let map;
let bounds;
let infoWindow;
let currentInfoWindow;
let service;
let infoPane;
function initMap() {
    // Initialize variables
    bounds = new google.maps.LatLngBounds();
    infoWindow = new google.maps.InfoWindow;
    currentInfoWindow = infoWindow;
    /* TODO: Step 4A3: Add a generic sidebar */

    // Try HTML5 geolocation
    if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(position => {
        pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
        };
        map = new google.maps.Map(document.getElementById('map'), {
        center: pos,
        zoom: 15
        });
        bounds.extend(pos);

        infoWindow.setPosition(pos);
        infoWindow.setContent('Location found.');
        infoWindow.open(map);
        map.setCenter(pos);

        /* TODO: Step 3B2, Call the Places Nearby Search */
    }, () => {
        // Browser supports geolocation, but user has denied permission
        handleLocationError(true, infoWindow);
    });
    } else {
    // Browser doesn't support geolocation
    handleLocationError(false, infoWindow);
    }
}

// Handle a geolocation error
function handleLocationError(browserHasGeolocation, infoWindow) {
    // Set default location to Sydney, Australia
    pos = {lat: -33.856, lng: 151.215};
    map = new google.maps.Map(document.getElementById('map'), {
    center: pos,
    zoom: 15
    });

    // Display an InfoWindow at the map center
    infoWindow.setPosition(pos);
    infoWindow.setContent(browserHasGeolocation ?
    'Geolocation permissions denied. Using default location.' :
    'Error: Your browser doesn\'t support geolocation.');
    infoWindow.open(map);
    currentInfoWindow = infoWindow;

    /* TODO: Step 3B3, Call the Places Nearby Search */
}
/* END TODO: Step 2, Geolocate your user */
/* TODO: Step 3B1, Call the Places Nearby Search */

Thử nghiệm

Lưu tệp của bạn.
Tải lại trang.

Lúc này, trình duyệt sẽ yêu cầu bạn cấp quyền chia sẻ vị trí của bạn với ứng dụng.

Nhấp vào Chặn một lần để xem liệu thao tác này có xử lý lỗi một cách trơn tru và vẫn tập trung vào Sydney hay không.
Tải lại một lần nữa rồi nhấp vào Cho phép để xem thông tin vị trí địa lý có hoạt động và di chuyển bản đồ đến vị trí hiện tại của bạn hay không.

Lưu ý: Trình duyệt có thể lưu chế độ cài đặt quyền gần đây nhất mà bạn đã cấp cho trang này. Để chọn một quyền khác (cho phép khi bạn đã chặn trước đó hoặc chặn khi bạn đã cho phép trước đó), bạn có thể cần xoá chế độ cài đặt trình duyệt.

Trong Chrome, hãy nhấp vào biểu tượng Trang này đang theo dõi vị trí của bạn trong thanh địa chỉ.

Thao tác này sẽ mở ra một cửa sổ mô tả chế độ cài đặt hiện tại và cho phép bạn xoá chế độ cài đặt đó cho những lần truy cập tiếp theo.

Nhấp vào Xoá các chế độ cài đặt này cho những lần truy cập tiếp theo bất cứ khi nào bạn muốn kiểm thử cách xử lý các quyền chặn và cho phép khác nhau của dịch vụ định vị địa lý.

Mã mẫu đầy đủ

Bạn có thể xem toàn bộ mã của dự án này cho đến thời điểm này trên Github.

4. Tìm kiếm địa điểm lân cận

Tính năng Tìm kiếm lân cận cho phép bạn tìm kiếm địa điểm trong một khu vực cụ thể theo từ khoá hoặc loại. Bạn phải luôn thêm vị trí vào yêu cầu Tìm kiếm lân cận. Bạn có thể chỉ định vị trí theo một trong hai cách:

Một đối tượng LatLngBounds xác định vùng tìm kiếm hình chữ nhật
Một vùng hình tròn được xác định là tổ hợp của thuộc tính location (chỉ định tâm của hình tròn dưới dạng một đối tượng LatLng) và bán kính, được đo bằng mét

Bắt đầu một Tìm kiếm lân cận bằng cách gọi phương thức PlacesService nearbySearch(). Phương thức này sẽ trả về một mảng các đối tượng PlaceResult.

A. Tải Places Library

Trước tiên, để truy cập vào các dịch vụ của Thư viện Địa điểm, hãy cập nhật URL nguồn tập lệnh để giới thiệu tham số libraries và thêm places làm giá trị.

step3/index.html

<!-- TODO: Step 3A, Load the Places Library -->
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap">

B. Gọi yêu cầu Tìm kiếm địa điểm lân cận và xử lý phản hồi

Tiếp theo, hãy tạo một Yêu cầu PlaceSearch. Các trường tối thiểu bắt buộc là:

Các trường tối thiểu bắt buộc là:

bounds, phải là một đối tượng google.maps.LatLngBounds xác định vùng tìm kiếm hình chữ nhật, hoặc một location và một radius; đối tượng trước lấy một đối tượng google.maps.LatLng, còn đối tượng sau lấy một số nguyên đơn giản biểu thị bán kính của vòng tròn theo mét. Bán kính tối đa cho phép là 50.000 mét. Xin lưu ý rằng khi đặt rankBy thành DISTANCE, bạn phải chỉ định một vị trí nhưng không thể chỉ định bán kính hoặc ranh giới.
keyword để so khớp với tất cả các trường có sẵn, bao gồm nhưng không giới hạn ở tên, loại và địa chỉ, cũng như các bài đánh giá của khách hàng và nội dung khác của bên thứ ba, hoặc type, giúp hạn chế kết quả chỉ hiển thị những địa điểm khớp với loại được chỉ định. Bạn chỉ có thể chỉ định một loại (nếu bạn cung cấp nhiều loại, thì tất cả các loại sau mục nhập đầu tiên sẽ bị bỏ qua). Hãy xem danh sách các loại được hỗ trợ.

Trong lớp học lập trình này, bạn sẽ sử dụng vị trí hiện tại của người dùng làm vị trí tìm kiếm và xếp hạng kết quả theo khoảng cách.

Thêm nội dung sau vào phần chú thích TODO: Step 3B1 để viết 2 hàm gọi lệnh tìm kiếm và xử lý phản hồi.

Từ khoá sushi được dùng làm cụm từ tìm kiếm, nhưng bạn có thể thay đổi từ khoá này. Mã để xác định hàm createMarkers được cung cấp trong phần tiếp theo.

step3/index.html

/* TODO: Step 3B1, Call the Places Nearby Search */
// Perform a Places Nearby Search Request
function getNearbyPlaces(position) {
    let request = {
    location: position,
    rankBy: google.maps.places.RankBy.DISTANCE,
    keyword: 'sushi'
    };

    service = new google.maps.places.PlacesService(map);
    service.nearbySearch(request, nearbyCallback);
}

// Handle the results (up to 20) of the Nearby Search
function nearbyCallback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
    createMarkers(results);
    }
}

/* TODO: Step 3C, Generate markers for search results */

Thêm dòng này vào cuối hàm initMap tại nhận xét TODO: Step 3B2.

/* TODO: Step 3B2, Call the Places Nearby Search */
// Call Places Nearby Search on user's location
getNearbyPlaces(pos);

Thêm dòng này vào cuối hàm handleLocationError tại nhận xét TODO: Step 3B3.

/* TODO: Step 3B3, Call the Places Nearby Search */
// Call Places Nearby Search on the default location
getNearbyPlaces(pos);

C. Tạo điểm đánh dấu cho kết quả tìm kiếm

Điểm đánh dấu xác định một vị trí trên bản đồ. Theo mặc định, điểm đánh dấu sẽ sử dụng một hình ảnh tiêu chuẩn. Để biết thông tin về cách tuỳ chỉnh hình ảnh điểm đánh dấu, hãy xem phần Điểm đánh dấu.

Hàm khởi tạo google.maps.Marker lấy một chữ Marker options đối tượng duy nhất, chỉ định các thuộc tính ban đầu của điểm đánh dấu.

Các trường sau đây đặc biệt quan trọng và thường được đặt khi tạo một điểm đánh dấu:

position (bắt buộc) chỉ định một LatLng xác định vị trí ban đầu của điểm đánh dấu.
map (không bắt buộc) chỉ định Bản đồ để đặt điểm đánh dấu. Nếu bạn không chỉ định bản đồ khi tạo điểm đánh dấu, thì điểm đánh dấu sẽ được tạo nhưng không được đính kèm (hoặc hiển thị) trên bản đồ. Bạn có thể thêm điểm đánh dấu sau bằng cách gọi phương thức setMap() của điểm đánh dấu.
Thêm mã sau vào sau phần chú thích TODO: Step 3C để đặt vị trí, bản đồ và tiêu đề cho một điểm đánh dấu cho mỗi địa điểm được trả về trong phản hồi. Bạn cũng sử dụng phương thức extend của biến bounds để đảm bảo rằng tâm và tất cả các điểm đánh dấu đều xuất hiện trên bản đồ.

step3/index.html

/* TODO: Step 3C, Generate markers for search results */
// Set markers at the location of each place result
function createMarkers(places) {
    places.forEach(place => {
    let marker = new google.maps.Marker({
        position: place.geometry.location,
        map: map,
        title: place.name
    });

    /* TODO: Step 4B: Add click listeners to the markers */

    // Adjust the map bounds to include the location of this marker
    bounds.extend(place.geometry.location);
    });
    /* Once all the markers have been placed, adjust the bounds of the map to
    * show all the markers within the visible area. */
    map.fitBounds(bounds);
}

/* TODO: Step 4C: Show place details in an info window */

Thử nghiệm

Lưu và tải lại trang, rồi nhấp vào Cho phép để cấp quyền truy cập vị trí địa lý.

Bạn sẽ thấy tối đa 20 điểm đánh dấu màu đỏ xung quanh vị trí trung tâm của bản đồ.

Tải lại trang và chặn quyền truy cập vị trí địa lý lần này.

Bạn có nhận được kết quả tại trung tâm mặc định của bản đồ (trong ví dụ này, trung tâm mặc định là ở Sydney, Úc) không?

Mã mẫu đầy đủ

Bạn có thể xem toàn bộ mã của dự án này cho đến thời điểm này trên Github.

5. Hiển thị thông tin chi tiết về địa điểm theo yêu cầu

Sau khi có mã địa điểm của một địa điểm (được phân phối dưới dạng một trong các trường trong kết quả của tính năng Tìm kiếm lân cận), bạn có thể yêu cầu thêm thông tin chi tiết về địa điểm đó, chẳng hạn như địa chỉ đầy đủ, số điện thoại, điểm xếp hạng và bài đánh giá của người dùng. Trong lớp học lập trình này, bạn sẽ tạo một thanh bên để hiển thị thông tin chi tiết phong phú về Địa điểm và làm cho các điểm đánh dấu có tính tương tác để người dùng có thể chọn địa điểm để xem thông tin chi tiết.

Bạn cần một vị trí để hiển thị Thông tin chi tiết về địa điểm, vì vậy, đây là một đoạn mã đơn giản cho thanh bên mà bạn có thể dùng để trượt ra và hiển thị thông tin chi tiết về địa điểm khi người dùng nhấp vào một điểm đánh dấu.

Thêm mã sau vào thẻ style sau phần chú thích TODO: Step 4A1:

step4/index.html

/* TODO: Step 4A1: Make a generic sidebar */
/* Styling for an info pane that slides out from the left. 
    * Hidden by default. */
#panel {
    height: 100%;
    width: null;
    background-color: white;
    position: fixed;
    z-index: 1;
    overflow-x: hidden;
    transition: all .2s ease-out;
}

.open {
    width: 250px;
}

/* Styling for place details */
.hero {
    width: 100%;
    height: auto;
    max-height: 166px;
    display: block;
}

.place,
p {
    font-family: 'open sans', arial, sans-serif;
    padding-left: 18px;
    padding-right: 18px;
}

.details {
    color: darkslategrey;
}

a {
    text-decoration: none;
    color: cadetblue;
}

Trong phần body ngay trước thẻ div map, hãy thêm một thẻ div cho bảng chi tiết.

<!-- TODO: Step 4A2: Add a generic sidebar -->
<!-- The slide-out panel for showing place details -->
<div id="panel"></div>

Trong hàm initMap() sau chú thích TODO: Step 4A3, hãy khởi động biến infoPane như sau:

/* TODO: Step 4A3: Add a generic sidebar */
infoPane = document.getElementById('panel');

B. Thêm trình nghe lượt nhấp vào các điểm đánh dấu

Trong hàm createMarkers, hãy thêm một trình nghe lượt nhấp vào từng điểm đánh dấu khi bạn tạo các điểm đánh dấu đó.

Trình nghe lượt nhấp sẽ tìm nạp thông tin chi tiết về địa điểm được liên kết với điểm đánh dấu đó và gọi hàm để hiển thị thông tin chi tiết.

Dán mã sau vào bên trong hàm createMarkers tại phần chú thích mã TODO: Step 4B.

Phương thức showDetails được triển khai trong phần tiếp theo.

step4/index.html

/* TODO: Step 4B: Add click listeners to the markers */
// Add click listener to each marker
google.maps.event.addListener(marker, 'click', () => {
    let request = {
    placeId: place.place_id,
    fields: ['name', 'formatted_address', 'geometry', 'rating',
        'website', 'photos']
    };

    /* Only fetch the details of a place when the user clicks on a marker.
    * If we fetch the details for all place results as soon as we get
    * the search response, we will hit API rate limits. */
    service.getDetails(request, (placeResult, status) => {
    showDetails(placeResult, marker, status)
    });
});

Trong yêu cầu addListener, thuộc tính placeId chỉ định một vị trí duy nhất cho yêu cầu chi tiết và thuộc tính fields là một mảng tên trường cho thông tin bạn muốn trả về về địa điểm. Để xem danh sách đầy đủ các trường mà bạn có thể yêu cầu, hãy xem Giao diện PlaceResult.

C. Hiện thông tin chi tiết về địa điểm trong một cửa sổ thông tin

Cửa sổ thông tin hiển thị nội dung (thường là văn bản hoặc hình ảnh) trong một hộp thoại phía trên một vị trí nhất định trên bản đồ. Cửa sổ thông tin có một vùng nội dung và một cuống thon. Đầu của cuống được gắn vào một vị trí cụ thể trên bản đồ. Thông thường, cửa sổ thông tin được đính kèm vào các điểm đánh dấu, nhưng bạn cũng có thể đính kèm cửa sổ thông tin vào một vĩ độ/kinh độ cụ thể.

Thêm mã sau vào chú thích TODO: Step 4C để tạo một InfoWindow hiển thị tên và điểm xếp hạng của doanh nghiệp, đồng thời đính kèm cửa sổ đó vào điểm đánh dấu.

Bạn sẽ xác định showPanel trong phần tiếp theo để hiển thị thông tin chi tiết trong một thanh bên.

step4/index.html

/* TODO: Step 4C: Show place details in an info window */
// Builds an InfoWindow to display details above the marker
function showDetails(placeResult, marker, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
    let placeInfowindow = new google.maps.InfoWindow();
    placeInfowindow.setContent('<div><strong>' + placeResult.name +
        '</strong><br>' + 'Rating: ' + placeResult.rating + '</div>');
    placeInfowindow.open(marker.map, marker);
    currentInfoWindow.close();
    currentInfoWindow = placeInfowindow;
    showPanel(placeResult);
    } else {
    console.log('showDetails failed: ' + status);
    }
}

/* TODO: Step 4D: Load place details in a sidebar */

Sử dụng cùng thông tin chi tiết được trả về trong đối tượng PlaceResult để điền sẵn một div khác. Trong mẫu này, hãy sử dụng infoPane (đây là tên biến tuỳ ý cho div có mã nhận dạng "panel"). Mỗi khi người dùng nhấp vào một điểm đánh dấu mới, mã này sẽ đóng thanh bên nếu thanh bên đã mở, xoá thông tin chi tiết cũ, thêm thông tin chi tiết mới và mở thanh bên.

Thêm mã sau vào sau phần chú thích TODO: Step 4D.

step4/index.html

/* TODO: Step 4D: Load place details in a sidebar */
// Displays place details in a sidebar
function showPanel(placeResult) {
    // If infoPane is already open, close it
    if (infoPane.classList.contains("open")) {
    infoPane.classList.remove("open");
    }

    // Clear the previous details
    while (infoPane.lastChild) {
    infoPane.removeChild(infoPane.lastChild);
    }

    /* TODO: Step 4E: Display a Place Photo with the Place Details */

    // Add place details with text formatting
    let name = document.createElement('h1');
    name.classList.add('place');
    name.textContent = placeResult.name;
    infoPane.appendChild(name);
    if (placeResult.rating != null) {
    let rating = document.createElement('p');
    rating.classList.add('details');
    rating.textContent = `Rating: ${placeResult.rating} \u272e`;
    infoPane.appendChild(rating);
    }
    let address = document.createElement('p');
    address.classList.add('details');
    address.textContent = placeResult.formatted_address;
    infoPane.appendChild(address);
    if (placeResult.website) {
    let websitePara = document.createElement('p');
    let websiteLink = document.createElement('a');
    let websiteUrl = document.createTextNode(placeResult.website);
    websiteLink.appendChild(websiteUrl);
    websiteLink.title = placeResult.website;
    websiteLink.href = placeResult.website;
    websitePara.appendChild(websiteLink);
    infoPane.appendChild(websitePara);
    }

    // Open the infoPane
    infoPane.classList.add("open");
}

E. Hiển thị một bức ảnh về địa điểm cùng với thông tin chi tiết về địa điểm

Kết quả getDetails trả về một mảng gồm tối đa 10 bức ảnh được liên kết với placeId. Tại đây, bạn sẽ hiển thị bức ảnh đầu tiên phía trên tên địa điểm trong thanh bên.

Đặt mã này trước khi tạo phần tử name nếu bạn muốn ảnh xuất hiện ở đầu thanh bên.

step4/index.html

/* TODO: Step 4E: Display a Place Photo with the Place Details */
// Add the primary photo, if there is one
if (placeResult.photos != null) {
    let firstPhoto = placeResult.photos[0];
    let photo = document.createElement('img');
    photo.classList.add('hero');
    photo.src = firstPhoto.getUrl();
    infoPane.appendChild(photo);
}

Thử nghiệm

Lưu và tải lại trang trong trình duyệt, đồng thời cho phép quyền truy cập vị trí địa lý.
Nhấp vào một điểm đánh dấu để xem cửa sổ thông tin bật lên từ điểm đánh dấu, hiển thị một số thông tin chi tiết và thanh bên trượt ra từ bên trái để hiển thị thêm thông tin chi tiết.
Kiểm tra xem tính năng tìm kiếm có hoạt động hay không nếu bạn tải lại và từ chối quyền truy cập vào thông tin vị trí. Chỉnh sửa từ khoá tìm kiếm để có một cụm từ tìm kiếm khác và khám phá kết quả trả về cho cụm từ tìm kiếm đó.

Mã mẫu đầy đủ

Bạn có thể xem toàn bộ mã của dự án này cho đến thời điểm này trên Github.

6. Xin chúc mừng

Xin chúc mừng! Bạn đã sử dụng nhiều tính năng của Maps JavaScript API, bao gồm cả Thư viện Places.

Nội dung đã đề cập

Tạo bản đồ bằng lớp google.maps.Map
Sử dụng trình duyệt của người dùng để định vị địa lý và hiển thị kết quả trên bản đồ
Thêm điểm đánh dấu vào bản đồ và phản hồi các sự kiện nhấp của người dùng trên các điểm đánh dấu đó
Thêm cửa sổ thông tin để hiển thị thêm thông tin khi người dùng nhấp vào một điểm đánh dấu
Tải Thư viện địa điểm và thực hiện Tìm kiếm lân cận
Tìm nạp và hiển thị thông tin chi tiết về địa điểm và ảnh địa điểm

Tìm hiểu thêm

Để làm được nhiều việc hơn nữa với bản đồ, hãy khám phá tài liệu về Maps JavaScript API và tài liệu về Thư viện địa điểm. Cả hai tài liệu này đều có các hướng dẫn, hướng dẫn từng bước, tài liệu tham khảo API, nhiều mã mẫu hơn và các kênh hỗ trợ. Một số tính năng phổ biến là Nhập dữ liệu vào Maps, Bắt đầu tạo kiểu cho bản đồ và thêm Dịch vụ Chế độ xem đường phố.

Bạn muốn chúng tôi xây dựng loại lớp học lập trình nào tiếp theo?

Các ví dụ khác về cách sử dụng thông tin chi tiết về Địa điểm

Các lớp học lập trình khác sử dụng Maps Platform JavaScript API

Các lớp học lập trình khác dành cho Android

Các lớp học lập trình khác dành cho iOS

Trực quan hoá dữ liệu dựa trên vị trí trên bản đồ

Tạo kiểu tuỳ chỉnh cho bản đồ

Sử dụng StreetView

Bạn không thấy khoá học lập trình mà mình muốn trong danh sách trên? Yêu cầu cấp lại bằng cách báo lỗi mới tại đây.

Xây dựng dịch vụ tìm kiếm doanh nghiệp lân cận bằng Nền tảng Google Maps (JavaScript) Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

1. Trước khi bắt đầu

Điều kiện tiên quyết

Bắt đầu sử dụng Nền tảng Google Maps

Bạn sẽ thực hiện

Bạn cần có

Nhận mã mẫu

2. Tạo bản đồ có tâm mặc định

1. Tạo trang HTML

2. Thêm bản đồ

3. Dán khoá API

Thử nghiệm

Mã mẫu đầy đủ

3. Xác định vị trí địa lý của người dùng

Định vị địa lý là gì?

Hãy tự trải nghiệm

Thử nghiệm

Mã mẫu đầy đủ

4. Tìm kiếm địa điểm lân cận

A. Tải Places Library

B. Gọi yêu cầu Tìm kiếm địa điểm lân cận và xử lý phản hồi

C. Tạo điểm đánh dấu cho kết quả tìm kiếm

Thử nghiệm

Mã mẫu đầy đủ

5. Hiển thị thông tin chi tiết về địa điểm theo yêu cầu

A. Tạo một thanh bên chung

B. Thêm trình nghe lượt nhấp vào các điểm đánh dấu

C. Hiện thông tin chi tiết về địa điểm trong một cửa sổ thông tin

D. Tải thông tin chi tiết về địa điểm trong một thanh bên

E. Hiển thị một bức ảnh về địa điểm cùng với thông tin chi tiết về địa điểm

Thử nghiệm

Mã mẫu đầy đủ

6. Xin chúc mừng

Nội dung đã đề cập

Tìm hiểu thêm

Bạn muốn chúng tôi xây dựng loại lớp học lập trình nào tiếp theo?

Xây dựng dịch vụ tìm kiếm doanh nghiệp lân cận bằng Nền tảng Google Maps (JavaScript)