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

Còn 60 phút

Thông tin về lớp học lập trình này

Lần cập nhật gần đây nhất: thg 12 3, 2021

Tác giả: Angela Yu

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

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

Tìm hiểu cách sử dụng API Maps và Địa điểm trên Google Maps Platform để xây dựng một lượt tìm kiếm doanh nghiệp địa phương, vị trí địa lý của người dùng và hiển thị những địa điểm thú vị gần đó. Ứng dụng này tích hợp vị trí địa lý, thông tin chi tiết về địa điểm, ảnh địa điểm và nhiều thông tin 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 (hãy làm theo hướng dẫn trong bước tiếp theo nếu bạn chưa có tài khoản này).
Với bước bật bên dưới, bạn cần bật API JavaScript của Maps và API địa điểm.
Khóa 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 với Nền tảng Google Maps để hoàn thành các bước sau:

Tạo một tài khoản thanh toán.
Tạo một dự án.
Bật 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
Căn giữa bản đồ vào vị trí của người dùng
Tìm địa điểm lân cận và hiển thị kết quả dưới dạng điểm đánh dấu có thể nhấp
Tìm nạp và hiển thị 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) và 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 này không hiệu quả, hãy nhấp vào nút sau để tải tất cả mã xuống cho lớp học lập trình này, sau đó giải nén tệp:

Tải mã xuống

Thay đổi vào thư mục 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 kết thúc mong muốn của từng bước trong lớp học lập trình này. Bạn có thể tham khảo ở đây. Thực hiện tất cả quá trình mã hóa trong thư mục có tên là work.

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

Có ba 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 của bạn

1. Tạo trang HTML

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

Thay đổi các thư mục vào thư mục work/ của bạn. Trong toàn bộ 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 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 của bạn.

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 của bạn và viết JavaScript của chính bạn, API này sử dụng API để thêm bản đồ vào trang web.

Thêm mã tập lệnh này nơi bạn thấy  sau div map 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 trong khóa API

Trong dòng sau , hãy sao chép và thay thế giá trị của thông số khóa trong URL nguồn của tập lệnh bằng khóa API mà bạn đã tạo trong các đ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 làm việc.

Thử nghiệm

Tải lại chế độ xem trình duyệt của tệp mà bạn đang chỉnh sửa. Bạn sẽ thấy một bản đồ hiện xuất hiện ở nơi hình chữ nhật màu xám trước đó. Nếu bạn nhì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 khóa API của riêng bạn. Xem ở trên để biết cách nhận khóa API nếu bạn chưa có khóa.

Mã mẫu đầy đủ

Mã đầy đủ cho dự án này cho đến thời điểm này có trên Github.

3. Định vị 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 API JavaScript của Maps.

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 từ Mountain View, California:

Vị trí địa lý là gì?

Vị trí địa lý là việc 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ụ vị trí địa lý 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 vị trí địa lý tiêu chuẩn W3C của trình duyệt web navigator.geolocation để xác định vị trí của người dùng.

Hãy tự mình trải nghiệm

Thay thế mã giữa nhận xét 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.

Giờ đâ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 lỗi này có giúp xử lý lỗi dễ dàng và duy trì tập trung vào Sydney hay không.
Tải lại lần nữa và nhấp vào Cho phép để xem 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ủa bạn có thể lưu tùy chọn cài đặt quyền cuối cùng mà bạn cấp cho trang này. Để chọn một quyền khác (cho phép khi đã chặn trước đó hoặc chặn khi đã cho phép trước đó), bạn có thể cần xóa chế độ cài đặt của trình duyệt.

Trong Chrome, hãy nhấp vào 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 của bạn và cho phép bạn xóa chế độ cài đặt đó cho các lượt truy cập trong tương lai.

Nhấp vào Xóa các tùy chọn cài đặt này cho các lượt truy cập trong tương lai bất cứ lúc nào bạn muốn thử nghiệm việc xử lý các khối khác nhau và cho phép quyền truy cập thông tin vị trí địa lý.

Mã mẫu đầy đủ

Mã đầy đủ cho dự án này cho đến thời điểm này có trên Github.

4. Tì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 các địa điểm trong một khu vực cụ thể theo từ khóa hoặc loại. Tìm kiếm lân cận phải luôn bao gồm vị trí, có thể được chỉ định theo một trong hai cách:

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

Bắt đầu Tìm kiếm lân cận bằng lệnh gọi đến 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 Thư viện địa điểm

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

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 Tìm kiếm địa điểm lân cận yêu cầu và xử lý phản hồi

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

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

bounds, phải là đối tượng google.maps.LatLngBounds xác định khu vực tìm kiếm hình chữ nhật, hoặc location và radius; trước đây là đối tượng google.maps.LatLng, còn sau đó là một số nguyên đơn giản biểu thị bán kính vòng tròn tính bằng mét. Bán kính tối đa được phép là 50.000 mét. Xin lưu ý rằng khi rankBy được đặt 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 để được 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ư bài đánh giá của khách hàng và nội dung của bên thứ ba khác, hoặc type – giới hạn kết quả ở những địa điểm khớp với loại đã chỉ định. 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). Xem danh sách các loại kết quả được hỗ trợ.

Đối với 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í cho 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 nhận xét TODO: Step 3B1 để viết hai hàm cần gọi tìm kiếm và xử lý phản hồi.

Từ khóa sushi được sử dụng làm cụm từ tìm kiếm, nhưng bạn có thể thay đổi từ khóa 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 vị trí trên bản đồ. Theo mặc định, điểm đánh dấu sử dụng hình ảnh chuẩn. Để biết thông tin về cách tùy chỉnh hình ảnh điểm đánh dấu, hãy xem phần Điểm đánh dấu.

Hàm dựng google.maps.Marker có một đối tượng Marker options duy nhất, nghĩa là 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 đ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 xây dựng điểm đánh dấu, điểm đánh dấu sẽ được tạo, nhưng không được đính kèm vào (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 đánh dấu setMap() của điểm đánh dấu.
Thêm mã sau nhận xét TODO: Step 3C để đặt vị trí, bản đồ và tiêu đề cho một điểm đánh dấu 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 hiển thị 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 thông tin vị trí địa lý.

Bạn sẽ nhìn 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 thông tin vị trí địa lý lần này.

Bạn vẫn nhận được kết quả ở trung tâm mặc định của bản đồ của mình (trong mẫu, mặc định là ở Sydney, Úc)?

Mã mẫu đầy đủ

Mã đầy đủ cho dự án này cho đến thời điểm này có 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 địa điểm (được cung cấp dưới dạng một trong các trường trong kết quả 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 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 chi tiết.

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

Thêm mã sau vào thẻ style sau nhận xét 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 mục body ngay trước div map, hãy thêm 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 nhận xét TODO: Step 4A3, hãy khởi chạy biến infoPane như sau:

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

B. Thêm trình xử lý 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 xử lý lượt nhấp vào mỗi điểm đánh dấu khi bạn tạo điểm đánh dấu đó.

Trình nghe lượt nhấp tìm nạp thông tin chi tiết về địa điểm 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 bên trong hàm createMarkers vào nhận xét 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 nơi duy nhất cho yêu cầu chi tiết và thuộc tính fields là một dãy tên của trường cho thông tin mà bạn muốn trả về về địa điểm. Để biết danh sách đầy đủ các trường mà bạn có thể yêu cầu, hãy xem giao diện Đặt kết quả.

C. Hiển thị Thông tin chi tiết về địa điểm trong 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 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ó khu vực nội dung và phần thân. Đầu của điểm gốc được đính kèm 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 một cửa sổ thông tin vào một vĩ độ/kinh độ cụ thể.

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

Bạn xác định showPanel trong phần tiếp theo để hiển thị thông tin chi tiết trong 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 các chi tiết được trả về trong đối tượng PlaceResult để điền div khác. Trong mẫu này, hãy sử dụng infoPane là tên biến tùy ý cho div có mã "panel". Mỗi lần 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 cửa sổ đó đã mở, xóa các chi tiết cũ, thêm thông tin chi tiết mới và mở thanh bên.

Thêm mã sau bình luận 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");
}

Đông Hiển thị ảnh địa điểm bằng 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 ảnh được liên kết với placeId. Tại đây, bạn sẽ hiển thị ảnh đầu tiên phía trên tên địa điểm trong thanh bên.

Hãy đặ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 của bạn và cho phép quyền truy cập thông tin 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 vài 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.
Hãy kiểm tra xem tìm kiếm có hoạt động nếu bạn tải lại và từ chối quyền vị trí địa lý hay không. Chỉnh sửa từ khóa tìm kiếm của bạn cho một truy vấn khác và khám phá kết quả được trả lại cho tìm kiếm đó.

Mã mẫu đầy đủ

Mã đầy đủ cho dự án này cho đến thời điểm này có 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 API JavaScript của Maps, bao gồm Thư viện Places.

Những điều chúng tôi đã đề 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 cho vị trí địa lý và hiển thị kết quả trên bản đồ
Thêm điểm đánh dấu vào bản đồ của 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 đó
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 cũng như ảnh địa điểm

Tìm hiểu thêm

Để làm được nhiều việc hơn với Maps, hãy khám phá tài liệu về API JavaScript của Maps và tài liệu về Thư viện địa điểm. Cả hai tài liệu này đều chứa hướng dẫn, hướng dẫn, tham khảo API, nhiều mã mẫu hơn và 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 định kiểu bản đồ của bạn và thêm Dịch vụ chế độ xem phố.

Bạn muốn học lớp học lập trình nào nhất?

Các ví dụ khác về việc sử dụng thông tin nhiều định dạng về Địa điểmCác lớp học lập trình khác sử dụng API JavaScript của Nền tảng MapsCác lớp học lập trình khác dành cho AndroidCác lớp học lập trình khác dành cho iOSHình ảnh hóa dữ liệu dựa trên vị trí trên bản đồKiểu tùy chỉnh của bản đồSử dụng Chế độ xem phố

Lớp học lập trình mà bạn muốn không được liệt kê ở trên? Yêu cầu phát hành vấn đề mới tại đây.

Báo cáo lỗi

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

Thông tin về lớp học lập trình này

Đ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

1. Tạo trang HTML

2. Thêm bản đồ

3. Dán trong khóa API

Thử nghiệm

Mã mẫu đầy đủ

Vị trí địa lý là gì?

Hãy tự mình trải nghiệm

Thử nghiệm

Mã mẫu đầy đủ

A. Tải Thư viện địa điểm

B. Gọi Tìm kiếm địa điểm lân cận yêu cầu 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 đủ

A. Tạo thanh bên chung

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

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

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

Đông Hiển thị ảnh địa điểm bằng thông tin chi tiết về địa điểm

Thử nghiệm

Mã mẫu đầy đủ

Những điều chúng tôi đã đề cập

Tìm hiểu thêm

Bạn muốn học lớp học lập trình nào nhất?