Thêm bản đồ Google vào ứng dụng React

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

Trong lớp học lập trình này, bạn sẽ tìm hiểu mọi thứ cần thiết để bắt đầu sử dụng thư viện vis.gl/react-google-map cho API JavaScript của Google Maps. Thư viện này cho phép bạn thêm một bản đồ Google vào ứng dụng React. Bạn sẽ tìm hiểu cách thiết lập, tải API JavaScript của Maps, hiển thị bản đồ đầu tiên, làm việc với các điểm đánh dấu và tính năng phân cụm điểm đánh dấu, vẽ trên bản đồ và xử lý hoạt động tương tác của người dùng.

Lưu ý: vis.gl/react-google-map sử dụng các dịch vụ của Nền tảng Google Maps. Việc sử dụng các dịch vụ của Nền tảng Google Maps thông qua thư viện này phải tuân theo Điều khoản dịch vụ của Nền tảng Google Maps.

vis.gl/react-google-map không phải là Dịch vụ cốt lõi của Nền tảng Google Maps. Do đó, Điều khoản dịch vụ của Nền tảng Google Maps (ví dụ: Dịch vụ hỗ trợ kỹ thuật, Thoả thuận mức độ cung cấp dịch vụ và Chính sách ngừng cung cấp) không áp dụng cho thư viện này.

Bạn có thể đọc thêm về Các lựa chọn hỗ trợ trong tệp README vis.gl/react-google-map.

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

• Kiến thức cơ bản về JavaScript, HTML và CSS

Kiến thức bạn sẽ học được

• Cách bắt đầu sử dụng thư viện vis.gl/react-google-map cho Nền tảng Google Maps.
• Cách tải API JavaScript của Maps một cách khai báo.
• Cách tải bản đồ trong ứng dụng React.
• Cách sử dụng điểm đánh dấu, điểm đánh dấu tuỳ chỉnh và tính năng phân cụm điểm đánh dấu.
• Cách sử dụng hệ thống sự kiện Maps JavaScript API để cung cấp hoạt động tương tác của người dùng.
• Cách kiểm soát bản đồ một cách linh hoạt.
• Cách vẽ trên bản đồ.

Bạn cần có

• Tài khoản Google Cloud có bật tính năng thanh toán.
• Khoá API Google Maps Platform có API JavaScript của Maps được bật.
• Node.js đã được cài đặt trên máy tính.
• Trình chỉnh sửa văn bản hoặc IDE mà bạn chọn.
• Thư viện vis.gl/react-google-map cho API JavaScript của Google Maps.
• Thư viện googlemaps/markerclusterer

Thiết lập Nền tảng Google Maps

Nếu bạn chưa có tài khoản Google Cloud Platform và dự án có bật tính năng thanh toán, vui lòng xem hướng dẫn Bắt đầu sử dụng Google Maps Platform để tạo tài khoản thanh toán và dự án.

1. Trong Cloud Console, hãy nhấp vào trình đơn thả xuống dự án rồi chọn dự án mà bạn muốn sử dụng cho lớp học lập trình này.

2. Bật các API và SDK của Google Maps Platform cần thiết cho lớp học lập trình này trong Google Cloud Marketplace. Để làm như vậy, hãy làm theo các bước trong video này hoặc tài liệu này.
3. Tạo khoá API trong trang Thông tin xác thực của Cloud Console. Bạn có thể làm theo các bước trong video này hoặc tài liệu này. Tất cả các yêu cầu gửi đến Nền tảng Google Maps đều cần có khoá API.

2. Bắt đầu thiết lập

Tải dự án khởi đầu xuống

Để tải mẫu dự án khởi đầu và mã giải pháp xuống, hãy làm theo các bước sau:

1. Tải xuống hoặc phân nhánh kho lưu trữ GitHub. Dự án khởi đầu nằm trong thư mục /starter và bao gồm cấu trúc tệp cơ bản mà bạn cần để hoàn thành lớp học lập trình. Bạn thực hiện mọi công việc trong thư mục /starter/src.

git clone https://github.com/googlemaps-samples/codelab-maps-platform-101-react-js.git

Ngoài ra, bạn có thể nhấp vào nút này để tải mã nguồn xuống.

Give Me the Code

2. Chuyển đến thư mục /starter rồi cài đặt npm. Thao tác này sẽ cài đặt tất cả các phần phụ thuộc cần thiết có trong tệp package.json.

cd starter && npm install

3. Trong khi vẫn ở thư mục /starter:

npm start

Dự án khởi đầu đã được thiết lập để bạn sử dụng máy chủ phát triển Vite, giúp biên dịch và chạy mã mà bạn viết cục bộ. Máy chủ phát triển Vite cũng tự động tải lại ứng dụng của bạn trong trình duyệt bất cứ khi nào bạn thực hiện thay đổi mã. Nếu nhấp vào đường liên kết được cung cấp ở cuối quy trình tạo, bạn sẽ thấy một trang web có nội dung: "Hello, world!"

4. Nếu bạn muốn chạy toàn bộ đoạn mã giải pháp, hãy chuyển đến thư mục /solution và hoàn tất các bước thiết lập tương tự.

3. Tải Maps JavaScript API

Nền tảng sử dụng Nền tảng Google Maps cho web là Maps JavaScript API. API này cung cấp một giao diện JavaScript để sử dụng tất cả các tính năng của Nền tảng Google Maps, bao gồm cả bản đồ, điểm đánh dấu, công cụ vẽ và các dịch vụ khác của Nền tảng Google Maps, chẳng hạn như Địa điểm.

Để tải Maps JavaScript API bằng khung React, bạn cần sử dụng thành phần APIProvider thuộc thư viện vis.gl/react-google-map. Bạn có thể thêm thành phần này ở bất kỳ cấp nào của ứng dụng, thường là ở đâu đó trên cùng và thành phần này sẽ kết xuất tất cả các thành phần con mà không sửa đổi. Ngoài việc xử lý quá trình tải Maps JavaScript API, thành phần này còn cung cấp thông tin và chức năng theo bối cảnh cho các thành phần và hook khác của thư viện này. APIProvider có trong thư viện vis.gl/react-google-map, nên thư viện này đã được cài đặt khi bạn chạy npm install trước đó.

Để sử dụng thành phần APIProvider, hãy làm theo các bước sau:

1. Mở tệp /src/app.tsx. Đây là tệp mà bạn sẽ làm mọi việc trong lớp học lập trình này.
2. Ở đầu tệp, hãy nhập lớp APIProvider từ thư viện @vis.gl/react-google-maps:

import {APIProvider} from '@vis.gl/react-google-maps';

3. Trong định nghĩa hàm App, hãy đặt tham số apiKey của thành phần APIProvider bằng Khoá API được tạo ở bước trước và thuộc tính onLoad bằng một thông báo nhật ký trên bảng điều khiển:

<APIProvider apiKey={'Your API key here'} onLoad={() => console.log('Maps API has loaded.')}>

Thành phần APIProvider lấy một loạt thuộc tính chỉ định nhiều lựa chọn để tải Maps JavaScript API, bao gồm cả khoá API Google Maps Platform, phiên bản API mà bạn muốn tải và mọi thư viện bổ sung do Maps JavaScript API cung cấp mà bạn muốn tải.

Khoá API Google Maps là thuộc tính duy nhất bắt buộc để APIProvider hoạt động và chúng tôi đã thêm thuộc tính onLoad cho mục đích minh hoạ. Để biết thêm thông tin, hãy xem <APIProvider> Thành phần.

Tệp app.tsx của bạn sẽ có dạng như bên dưới:

import React from 'react';
import {createRoot} from "react-dom/client";
import {APIProvider} from '@vis.gl/react-google-maps';

const App = () => (
 <APIProvider apiKey={'Your API key here'} onLoad={() => console.log('Maps API has loaded.')}>
   <h1>Hello, world!</h1>
 </APIProvider>
);

const root = createRoot(document.getElementById('app'));
root.render(<App />);

export default App;

Nếu mọi thứ đều thành công, bạn sẽ thấy câu lệnh console.log trong bảng điều khiển trình duyệt. Sau khi tải Maps JavaScript API, bạn có thể kết xuất bản đồ động ở bước tiếp theo.

4. Hiển thị bản đồ

Đã đến lúc hiển thị bản đồ đầu tiên của bạn!

Phần thường dùng nhất của API JavaScript của Maps là google.maps.Map. Đây là lớp cho phép bạn tạo và thao tác với các thực thể bản đồ. Thư viện vis.gl/react-google-map bao bọc lớp này trong thành phần Map. Trước tiên, hãy nhập các lớp Map và MapCameraChangedEvent.

import {APIProvider, Map, MapCameraChangedEvent} from '@vis.gl/react-google-maps';

Thành phần Map hỗ trợ nhiều chế độ cài đặt khác nhau cho bản đồ. Trong lớp học lập trình này, bạn sẽ sử dụng các chế độ cài đặt sau:

• defaultCenter, đặt vĩ độ và kinh độ cho tâm của bản đồ.
• defaultZoom, đặt cấp độ thu phóng ban đầu của bản đồ.
• Để hiển thị bản đồ, hãy đặt mã sau trong thẻ APIProvider để đặt bản đồ ở giữa Sydney, Úc và đặt mức thu phóng là 13. Đây là mức thu phóng phù hợp để hiển thị trung tâm thành phố:

 <Map
      defaultZoom={13}
      defaultCenter={ { lat: -33.860664, lng: 151.208138 } }
      onCameraChanged={ (ev: MapCameraChangedEvent) =>
        console.log('camera changed:', ev.detail.center, 'zoom:', ev.detail.zoom)
      }>
</Map>

Lúc này, bạn sẽ thấy bản đồ Sydney trong trình duyệt:

Tóm lại, trong phần này, bạn đã hiển thị một bản đồ bằng thành phần <Map> và đặt trạng thái ban đầu của bản đồ bằng các thuộc tính. Bạn cũng đã sử dụng các sự kiện để ghi lại thời điểm camera thay đổi.

Tệp app.tsx của bạn sẽ có dạng như sau:

import React from 'react';
import {createRoot} from "react-dom/client";
import {APIProvider, Map, MapCameraChangedEvent} from '@vis.gl/react-google-maps';

const App = () => (
 <APIProvider apiKey={'Your API key here'} onLoad={() => console.log('Maps API has loaded.')}>
   <Map
      defaultZoom={13}
      defaultCenter={ { lat: -33.860664, lng: 151.208138 } }
      onCameraChanged={ (ev: MapCameraChangedEvent) =>
        console.log('camera changed:', ev.detail.center, 'zoom:', ev.detail.zoom)
      }>
   </Map>
 </APIProvider>
);

const root = createRoot(document.getElementById('app'));
root.render(<App />);

export default App;

5. Thêm tính năng định kiểu bản đồ dựa trên đám mây

Bạn phải có mã bản đồ để sử dụng Điểm đánh dấu nâng cao. Bạn có thể dùng mã này để đánh dấu các địa điểm yêu thích trên bản đồ Sydney. Mã bản đồ cũng được dùng để định kiểu bản đồ dựa trên đám mây.

Bạn có thể tuỳ chỉnh kiểu bản đồ bằng tính năng Định kiểu bản đồ dựa trên đám mây.

Tạo mã bản đồ

Nếu bạn chưa tạo mã bản đồ có kiểu bản đồ được liên kết, hãy xem hướng dẫn về Mã bản đồ để hoàn tất các bước sau:

1. Tạo mã bản đồ.
2. Liên kết mã bản đồ với kiểu bản đồ.

Lưu ý: Việc sử dụng một Mã bản đồ trên Maps SDK dành cho Android hoặc Maps SDK dành cho iOS sẽ kích hoạt một lượt tải bản đồ được tính phí theo SKU Bản đồ động. Hãy xem phần Thanh toán cho Google Maps để biết thêm thông tin.

Để sử dụng mã bản đồ mà bạn đã tạo, hãy đặt thuộc tính mapId của thành phần <Map>:

<Map
    defaultZoom={13}
    defaultCenter={ { lat: -33.860664, lng: 151.208138 } }
    mapId='DEMO_MAP_ID'
    onCameraChanged={ (ev: MapCameraChangedEvent) =>
        console.log('camera changed:', ev.detail.center, 'zoom:', ev.detail.zoom)
    }>
</Map>

Bạn sẽ thấy kiểu mà mình đã chọn trên bản đồ!

6. Thêm điểm đánh dấu vào bản đồ

Có rất nhiều việc mà nhà phát triển có thể làm với Maps JavaScript API, nhưng việc đặt điểm đánh dấu trên bản đồ chắc chắn là việc phổ biến nhất. Các điểm đánh dấu cho phép bạn hiện các điểm cụ thể trên bản đồ và là một phần tử phổ biến trên giao diện người dùng để xử lý hoạt động tương tác của người dùng. Nếu đã từng sử dụng Google Maps, có lẽ bạn đã quen thuộc với điểm đánh dấu mặc định có dạng như sau:

Để sử dụng thành phần AdvancedMarker để đặt điểm đánh dấu trên bản đồ, hãy làm theo các bước sau:

1. Tạo một danh sách các đối tượng để biểu thị các địa điểm yêu thích ở khu vực Sydney, đặt danh sách đó ngay bên dưới các mục nhập, bên ngoài định nghĩa App:

type Poi ={ key: string, location: google.maps.LatLngLiteral }
const locations: Poi[] = [
  {key: 'operaHouse', location: { lat: -33.8567844, lng: 151.213108  }},
  {key: 'tarongaZoo', location: { lat: -33.8472767, lng: 151.2188164 }},
  {key: 'manlyBeach', location: { lat: -33.8209738, lng: 151.2563253 }},
  {key: 'hyderPark', location: { lat: -33.8690081, lng: 151.2052393 }},
  {key: 'theRocks', location: { lat: -33.8587568, lng: 151.2058246 }},
  {key: 'circularQuay', location: { lat: -33.858761, lng: 151.2055688 }},
  {key: 'harbourBridge', location: { lat: -33.852228, lng: 151.2038374 }},
  {key: 'kingsCross', location: { lat: -33.8737375, lng: 151.222569 }},
  {key: 'botanicGardens', location: { lat: -33.864167, lng: 151.216387 }},
  {key: 'museumOfSydney', location: { lat: -33.8636005, lng: 151.2092542 }},
  {key: 'maritimeMuseum', location: { lat: -33.869395, lng: 151.198648 }},
  {key: 'kingStreetWharf', location: { lat: -33.8665445, lng: 151.1989808 }},
  {key: 'aquarium', location: { lat: -33.869627, lng: 151.202146 }},
  {key: 'darlingHarbour', location: { lat: -33.87488, lng: 151.1987113 }},
  {key: 'barangaroo', location: { lat: - 33.8605523, lng: 151.1972205 }},
];

const App = () => (
  ...
);

2. Tuỳ chỉnh ghim bằng phần tử <Pin>:

<Pin background={'#FBBC04'} glyphColor={'#000'} borderColor={'#000'} />

3. Tạo một thành phần tuỳ chỉnh để kết xuất danh sách bằng Advanced Markers, đặt thành phần này bên dưới định nghĩa của App:

const App = () => (
  ...
);

const PoiMarkers = (props: {pois: Poi[]}) => {
  return (
    <>
      {props.pois.map( (poi: Poi) => (
        <AdvancedMarker
          key={poi.key}
          position={poi.location}>
        <Pin background={'#FBBC04'} glyphColor={'#000'} borderColor={'#000'} />
        </AdvancedMarker>
      ))}
    </>
  );
};

4. Thêm thành phần PoiMarkers làm thành phần con của thành phần Map:

<Map
  ... map properties ...
>
  <PoiMarkers pois={locations} />
</Map>

5. Cuối cùng, hãy thêm Pin và AdvancedMarker vào dữ liệu nhập của bạn.

import {
  APIProvider,
  Map,
  AdvancedMarker,
  MapCameraChangedEvent,
  Pin
} from '@vis.gl/react-google-maps';

Bạn sẽ thấy các điểm đánh dấu nâng cao tuỳ chỉnh trên bản đồ:

7. Bật tính năng nhóm điểm đánh dấu

Khi sử dụng nhiều điểm đánh dấu hoặc các điểm đánh dấu ở gần nhau, bạn có thể gặp phải vấn đề là các điểm đánh dấu chồng lên nhau hoặc xuất hiện quá dày đặc, gây ra trải nghiệm người dùng kém. Ví dụ: sau khi tạo các điểm đánh dấu ở bước cuối cùng, có thể bạn đã nhận thấy điều này:

Đây là lúc bạn cần đến tính năng nhóm điểm đánh dấu. Nhóm điểm đánh dấu là một tính năng khác thường được triển khai, giúp nhóm các điểm đánh dấu lân cận thành một biểu tượng duy nhất thay đổi tuỳ theo mức thu phóng, chẳng hạn như:

Thuật toán phân cụm điểm đánh dấu chia khu vực hiển thị của bản đồ thành một lưới, sau đó phân cụm các biểu tượng nằm trong cùng một ô. Rất may là bạn không cần lo lắng về bất kỳ điều gì trong số đó vì nhóm Google Maps Platform đã tạo một thư viện tiện ích mã nguồn mở hữu ích có tên là MarkerClustererPlus. Thư viện này sẽ tự động thực hiện mọi việc cho bạn. Bạn có thể xem nguồn của thư viện MarkerClustererPlus trên GitHub.

Để bật tính năng nhóm điểm đánh dấu, hãy làm theo các bước sau:

1. Ở đầu tệp app.tsx, hãy cập nhật và thêm vào các loại nhập và hỗ trợ thư viện của chúng ta.

import React, {useEffect, useState, useRef, useCallback} from 'react';
import {createRoot} from "react-dom/client";
import {
    APIProvider,
    Map,
    AdvancedMarker,
    MapCameraChangedEvent,
    useMap,
    Pin
  } from '@vis.gl/react-google-maps';
  import {MarkerClusterer} from '@googlemaps/markerclusterer';
  import type {Marker} from '@googlemaps/markerclusterer';

Đối với dự án mẫu của lớp học lập trình này, thư viện tiện ích MarkerClustererPlus đã có trong các phần phụ thuộc được khai báo trong tệp package.json. Vì vậy, bạn đã cài đặt thư viện này khi chạy npm install ở đầu lớp học lập trình này.

2. Tạo các biến cho MarkerClusterer và các phần tử hỗ trợ trong thành phần PoiMarkers.

Bạn cần một thực thể của bản đồ để khởi chạy MarkerClusterer. Lấy phiên bản đó từ lệnh gọi useMap():

const map = useMap();

3. Tạo một danh sách các điểm đánh dấu được lưu trữ trong một biến trạng thái:

const [markers, setMarkers] = useState<{[key: string]: Marker}>({});

4. Lưu trữ trình phân cụm dưới dạng một tham chiếu:

const clusterer = useRef<MarkerClusterer | null>(null);

5. Ngoài ra, trong thành phần PoiMarkers, hãy tạo một thực thể của MarkerClusterer và truyền vào đó thực thể của Map nơi bạn muốn hiển thị các cụm điểm đánh dấu:

 useEffect(() => {
    if (!map) return;
    if (!clusterer.current) {
      clusterer.current = new MarkerClusterer({map});
    }
  }, [map]);

6. Tạo một hiệu ứng cập nhật trình phân cụm khi danh sách điểm đánh dấu thay đổi:

useEffect(() => {
    clusterer.current?.clearMarkers();
    clusterer.current?.addMarkers(Object.values(markers));
  }, [markers]);

7. Tạo một hàm để tạo các giá trị tham chiếu cho các điểm đánh dấu mới:

const setMarkerRef = (marker: Marker | null, key: string) => {
    if (marker && markers[key]) return;
    if (!marker && !markers[key]) return;

    setMarkers(prev => {
      if (marker) {
        return {...prev, [key]: marker};
      } else {
        const newMarkers = {...prev};
        delete newMarkers[key];
        return newMarkers;
      }
    });
  };

8. Sử dụng phương thức này trong phần tử AdvancedMarker để tạo thông tin tham chiếu cho từng điểm đánh dấu.

<AdvancedMarker
  key={poi.key}
  position={poi.location}
  ref={marker => setMarkerRef(marker, poi.key)}
  >
    <Pin background={'#FBBC04'} glyphColor={'#000'} borderColor={'#000'} />
</AdvancedMarker>

Giờ đây, bạn sẽ thấy các cụm điểm đánh dấu trên bản đồ:

Nếu bạn phóng to và thu nhỏ, MarkerClustererPlus sẽ tự động đánh số lại và điều chỉnh kích thước các cụm cho bạn. Bạn cũng có thể nhấp vào biểu tượng cụm điểm đánh dấu bất kỳ để phóng to và xem tất cả các điểm đánh dấu có trong cụm đó.

Tóm lại, trong phần này, bạn đã nhập thư viện tiện ích MarkerClustererPlus nguồn mở và dùng thư viện này để tạo một phiên bản MarkerClusterer. Với sự trợ giúp của trạng thái và các tham chiếu React, phiên bản này sẽ tự động phân cụm các điểm đánh dấu mà bạn đã tạo ở bước trước.

Thành phần PoiMarkers của bạn sẽ có dạng như sau:

const PoiMarkers = (props: { pois: Poi[] }) => {
  const map = useMap();
  const [markers, setMarkers] = useState<{[key: string]: Marker}>({});
  const clusterer = useRef<MarkerClusterer | null>(null);

  // Initialize MarkerClusterer, if the map has changed
  useEffect(() => {
    if (!map) return;
    if (!clusterer.current) {
      clusterer.current = new MarkerClusterer({map});
    }
  }, [map]);

  // Update markers, if the markers array has changed
  useEffect(() => {
    clusterer.current?.clearMarkers();
    clusterer.current?.addMarkers(Object.values(markers));
  }, [markers]);

  const setMarkerRef = (marker: Marker | null, key: string) => {
    if (marker && markers[key]) return;
    if (!marker && !markers[key]) return;

    setMarkers(prev => {
      if (marker) {
        return {...prev, [key]: marker};
      } else {
        const newMarkers = {...prev};
        delete newMarkers[key];
        return newMarkers;
      }
    });
  };

  return (
    <>
      {props.pois.map( (poi: Poi) => (
        <AdvancedMarker
          key={poi.key}
          position={poi.location}
          ref={marker => setMarkerRef(marker, poi.key)}
          >
            <Pin background={'#FBBC04'} glyphColor={'#000'} borderColor={'#000'} />
        </AdvancedMarker>
      ))}
    </>
  );
};

Tiếp theo, bạn sẽ tìm hiểu cách xử lý hoạt động tương tác của người dùng.

8. Thêm lượt tương tác của người dùng

Giờ đây, bạn đã có một bản đồ đẹp mắt hiển thị một số điểm đến du lịch nổi tiếng nhất ở Sydney. Trong phần này, bạn sẽ thêm một số thao tác xử lý bổ sung về lượt tương tác của người dùng với hệ thống sự kiện của Maps JavaScript API để cải thiện hơn nữa trải nghiệm người dùng trên bản đồ.

Maps JavaScript API cung cấp một hệ thống sự kiện toàn diện sử dụng trình xử lý sự kiện JavaScript để cho phép bạn xử lý nhiều hoạt động tương tác của người dùng trong mã. Ví dụ: bạn có thể tạo trình nghe sự kiện để kích hoạt quá trình thực thi mã cho các hoạt động tương tác như người dùng nhấp vào bản đồ và điểm đánh dấu, kéo khung hiển thị của bản đồ, thu phóng và thu nhỏ, v.v.

Để thêm trình nghe click vào các điểm đánh dấu của bạn, sau đó lập trình để bản đồ di chuyển sao cho điểm đánh dấu được nhấp xuất hiện ở giữa bản đồ, hãy làm theo các bước sau:

1. Tạo một lệnh gọi lại trình xử lý click.

Trong thành phần PoiMarkers, hãy xác định một trình xử lý click bằng useCallback() của React.

Sự kiện click được kích hoạt bất cứ khi nào người dùng nhấp hoặc nhấn vào một điểm đánh dấu và trả về một sự kiện dưới dạng đối tượng JSON có thông tin về phần tử trên giao diện người dùng mà người dùng đã nhấp vào. Để cải thiện trải nghiệm người dùng trên bản đồ, bạn có thể xử lý sự kiện click và sử dụng đối tượng LatLng của sự kiện đó để lấy vĩ độ và kinh độ của điểm đánh dấu đã được nhấp.

Sau khi có vĩ độ và kinh độ, hãy truyền thông tin đó đến hàm panTo() tích hợp của thực thể Map để bản đồ di chuyển mượt mà nhằm căn giữa lại trên điểm đánh dấu đã nhấp bằng cách thêm nội dung sau vào hàm gọi lại của trình xử lý sự kiện:

const PoiMarkers = (props: { pois: Poi[] }) => {
...
const handleClick = useCallback((ev: google.maps.MapMouseEvent) => {
    if(!map) return;
    if(!ev.latLng) return;
    console.log('marker clicked:', ev.latLng.toString());
    map.panTo(ev.latLng);
  });
...
};

2. Chỉ định trình xử lý click cho các điểm đánh dấu.

Các phần tử AdvancedMarker của thư viện vis.gl/react-google-map hiển thị 2 thuộc tính hữu ích cho việc xử lý các lượt nhấp:

• clickable: Nếu là true, AdvancedMarker sẽ có thể nhấp và kích hoạt sự kiện gmp-click, đồng thời có thể tương tác cho mục đích hỗ trợ tiếp cận. Ví dụ: tính năng này sẽ cho phép điều hướng bằng bàn phím thông qua các phím mũi tên.
• onClick: Hàm gọi lại cần gọi khi sự kiện click xảy ra.

3. Cập nhật quá trình kết xuất PoiMarkers để chỉ định một trình xử lý click cho từng điểm đánh dấu:

return (
    <>
      {props.pois.map( (poi: Poi) => (
        <AdvancedMarker
          ... other properties ...
          clickable={true}
          onClick={handleClick}
          >
           ...
        </AdvancedMarker>
      ))}
    </>
  );

4. Chuyển đến trình duyệt rồi nhấp vào các điểm đánh dấu. Bạn sẽ thấy bản đồ tự động di chuyển để căn giữa lại khi một điểm đánh dấu được nhấp vào.

Tóm lại, trong phần này, bạn đã sử dụng hệ thống sự kiện của React để chỉ định một trình xử lý click cho tất cả các điểm đánh dấu trên bản đồ, truy xuất vĩ độ và kinh độ của điểm đánh dấu từ sự kiện click đã kích hoạt, đồng thời sử dụng thông tin đó để đặt lại tâm bản đồ bất cứ khi nào một điểm đánh dấu được nhấp vào.

Chỉ còn một bước nữa thôi! Tiếp theo, bạn sẽ cải thiện hơn nữa trải nghiệm người dùng trên bản đồ bằng các tính năng vẽ của Maps JavaScript API.

9. Vẽ trên bản đồ

Cho đến nay, bạn đã tạo một bản đồ Sydney có các điểm đánh dấu cho những điểm đến du lịch nổi tiếng và xử lý hoạt động tương tác của người dùng. Trong bước cuối cùng của lớp học lập trình này, bạn sẽ sử dụng các tính năng vẽ của Maps JavaScript API để thêm một tính năng hữu ích khác vào trải nghiệm bản đồ.

Hãy tưởng tượng rằng bản đồ này sẽ được những người dùng muốn khám phá thành phố Sydney sử dụng. Một tính năng hữu ích là hình dung bán kính xung quanh một điểm đánh dấu khi điểm đó được nhấp vào. Điều này sẽ giúp người dùng biết những điểm đến khác nằm trong khoảng cách đi bộ từ điểm đánh dấu đã nhấp.

Maps JavaScript API bao gồm một bộ hàm để vẽ các hình dạng trên bản đồ, chẳng hạn như hình vuông, đa giác, đường kẻ và hình tròn. Thư viện vis.gl/react-google-map cung cấp cho bạn những chức năng này trong React.

Tiếp theo, bạn sẽ hiển thị một vòng tròn để cho biết bán kính 800 mét (khoảng nửa dặm) xung quanh một điểm đánh dấu khi điểm đó được nhấp vào.

Kho lưu trữ khởi đầu chứa một thành phần tuỳ chỉnh cho phần tử circle. Bạn có thể tìm thấy thành phần này trong tệp src/components/circle.tsx.

Để cho phép người dùng vẽ trên bản đồ, hãy làm theo các bước sau:

1. Cập nhật các mục nhập để thêm thành phần Circle được cung cấp.

import {Circle} from './components/circle'

2. Tạo một biến trạng thái cho tâm đường tròn.

Ghi lại trạng thái của tâm vòng tròn trong thành phần PoiMarkers. Bạn đặt trạng thái ban đầu thành giá trị rỗng và dựa vào thực tế là một hình tròn sẽ không hiển thị trừ phi có vị trí tâm (và bán kính) hợp lệ.

const PoiMarkers = (props: { pois: Poi[] }) => {
...
  const [circleCenter, setCircleCenter] = useState(null)
...
};

3. Cập nhật tâm đường tròn khi một sự kiện click được xử lý.

Gọi setCircleCenter bằng vị trí có trong đối tượng sự kiện:

const handleClick = useCallback((ev: google.maps.MapMouseEvent) => {
    ...
    setCircleCenter(ev.latLng);
  });

Các hàm vẽ trong Maps JavaScript API cung cấp cho bạn nhiều lựa chọn về cách một đối tượng được vẽ xuất hiện trên bản đồ. Để hiển thị bán kính hình tròn, hãy đặt các thuộc tính của phần tử hình tròn, chẳng hạn như màu sắc và độ dày của nét vẽ, trong đó hình tròn phải được căn giữa và bán kính của hình tròn.

4. Thêm một vòng tròn vào quá trình kết xuất và liên kết tâm của vòng tròn với biến trạng thái. Hình ảnh kết xuất của bạn sẽ có dạng như sau:

return (
    <>
      <Circle
          radius={800}
          center={circleCenter}
          strokeColor={'#0c4cb3'}
          strokeOpacity={1}
          strokeWeight={3}
          fillColor={'#3b82f6'}
          fillOpacity={0.3}
        />
      {props.pois.map( (poi: Poi) => (
        <AdvancedMarker
          key={poi.key}
          position={poi.location}
          ref={marker => setMarkerRef(marker, poi.key)}
          clickable={true}
          onClick={handleClick}
          >
            <Pin background={'#FBBC04'} glyphColor={'#000'} borderColor={'#000'} />
        </AdvancedMarker>
      ))}
    </>
  );
};

Đã xong! Chuyển đến trình duyệt rồi nhấp vào một trong các điểm đánh dấu. Bạn sẽ thấy một bán kính hình tròn được kết xuất xung quanh:

10. Xin chúc mừng

Bạn đã tạo ứng dụng web đầu tiên bằng thư viện vis.gl/react-google-map cho Google Maps Platform, bao gồm cả việc tải API JavaScript của Maps, tải bản đồ, làm việc với các điểm đánh dấu, kiểm soát và vẽ trên bản đồ, cũng như thêm hoạt động tương tác của người dùng.

Để xem mã nguồn hoàn chỉnh, hãy xem thư mục /solutions.

Tìm hiểu thêm

• Tài liệu vis.gl/react-google-map
• Tài liệu về Maps JavaScript API
• Kênh YouTube của Nền tảng Google Maps
• Lớp học lập trình của Nền tảng Google Maps
• Các dự án nguồn mở của Google Maps Platform trên GitHub