Kiểu bản đồ mới sắp xuất hiện trên Nền tảng Google Maps. Bản cập nhật này để tạo kiểu bản đồ bao gồm một bảng màu mặc định mới và các cải tiến về trải nghiệm bản đồ cũng như khả năng hữu dụng. Tất cả kiểu bản đồ sẽ được cập nhật tự động vào tháng 3 năm 2025. Để biết thêm thông tin về phạm vi cung cấp và cách chọn tham gia sớm hơn, hãy xem bài viết Kiểu bản đồ mới cho Nền tảng Google Maps.

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

Cửa sổ thông tin

Chọn nền tảng: Android iOS JavaScript

Cửa sổ thông tin hiển thị văn bản hoặc hình ảnh trong cửa sổ bật lên phía trên bản đồ. Cửa sổ thông tin luôn liên kết với một điểm đánh dấu. Hành vi mặc định của chúng là hiển thị khi người dùng nhấn vào điểm đánh dấu.

Mã mẫu

Kho lưu trữ Apidemos trên GitHub bao gồm một mẫu minh hoạ tất cả các tính năng cửa sổ thông tin:

MarkerdemoActivity – Java: Tuỳ chỉnh cửa sổ thông tin và sử dụng trình nghe cửa sổ thông tin
MarkerdemoActivity – Kotlin: Tuỳ chỉnh cửa sổ thông tin và sử dụng trình nghe cửa sổ thông tin

Giới thiệu

Cửa sổ thông tin cho phép bạn hiển thị thông tin cho người dùng khi họ nhấn vào một điểm đánh dấu. Mỗi lần chỉ hiển thị một cửa sổ thông tin. Nếu người dùng nhấp vào một điểm đánh dấu, cửa sổ thông tin hiện tại sẽ đóng và cửa sổ thông tin mới sẽ hiển thị. Lưu ý rằng nếu người dùng nhấp vào một điểm đánh dấu đang hiển thị cửa sổ thông tin, thì cửa sổ thông tin đó sẽ đóng rồi mở lại.

Một cửa sổ thông tin được vẽ theo hướng dựa vào màn hình của thiết bị, chính giữa phía trên điểm đánh dấu liên kết. Cửa sổ thông tin mặc định có tiêu đề được in đậm, với văn bản đoạn trích (không bắt buộc) bên dưới tiêu đề.

Thêm cửa sổ thông tin

Cách đơn giản nhất để thêm một cửa sổ thông tin là đặt phương thức title() và snippet() của điểm đánh dấu tương ứng. Khi bạn đặt các thuộc tính này, một cửa sổ thông tin sẽ xuất hiện bất cứ khi nào bạn nhấp vào điểm đánh dấu.

Kotlin



val melbourneLatLng = LatLng(-37.81319, 144.96298)
val melbourne = map.addMarker(
    MarkerOptions()
        .position(melbourneLatLng)
        .title("Melbourne")
        .snippet("Population: 4,137,400")
)

Java


final LatLng melbourneLatLng = new LatLng(-37.81319, 144.96298);
Marker melbourne = map.addMarker(
    new MarkerOptions()
        .position(melbourneLatLng)
        .title("Melbourne")
        .snippet("Population: 4,137,400"));

Hiển thị/Ẩn cửa sổ thông tin

Cửa sổ thông tin được thiết kế để phản hồi các sự kiện chạm của người dùng. Nếu muốn, bạn có thể hiển thị một cửa sổ thông tin theo phương thức lập trình bằng cách gọi showInfoWindow() trên điểm đánh dấu mục tiêu. Bạn có thể ẩn một cửa sổ thông tin bằng cách gọi hideInfoWindow().

Kotlin



val melbourneLatLng = LatLng(-37.81319, 144.96298)
val melbourne = map.addMarker(
    MarkerOptions()
        .position(melbourneLatLng)
        .title("Melbourne")
)
melbourne?.showInfoWindow()

Java


final LatLng melbourneLatLng = new LatLng(-37.81319, 144.96298);
Marker melbourne = map.addMarker(
    new MarkerOptions()
        .position(melbourneLatLng)
        .title("Melbourne"));
melbourne.showInfoWindow();

Bạn cũng có thể tạo cửa sổ thông tin cho từng điểm đánh dấu được nhóm riêng lẻ. Đọc hướng dẫn về cách thêm cửa sổ thông tin cho từng điểm đánh dấu được nhóm.

Cửa sổ thông tin tuỳ chỉnh

Bạn cũng có thể tuỳ chỉnh nội dung và thiết kế của cửa sổ thông tin. Để thực hiện việc này, bạn phải tạo phương thức triển khai cụ thể của giao diện InfoWindowAdapter, sau đó gọi GoogleMap.setInfoWindowAdapter() bằng phương thức triển khai của mình. Giao diện này có 2 phương thức để bạn triển khai: getInfoWindow(Marker) và getInfoContents(Marker). Trước tiên, API sẽ gọi getInfoWindow(Marker) và nếu null được trả về, thì API này sẽ gọi getInfoContents(Marker). Nếu thao tác này cũng trả về null, thì cửa sổ thông tin mặc định sẽ được sử dụng.

Tính năng đầu tiên trong số này (getInfoWindow()) cho phép bạn cung cấp một khung hiển thị sẽ dùng cho toàn bộ cửa sổ thông tin. Tính năng thứ hai trong số này (getInfoContents()) cho phép bạn chỉ cần tuỳ chỉnh nội dung của cửa sổ nhưng vẫn giữ khung và nền của cửa sổ thông tin mặc định.

Lưu ý: Cửa sổ thông tin được vẽ không phải là chế độ xem trực tiếp. Khung hiển thị được kết xuất dưới dạng hình ảnh (sử dụng View.draw(Canvas)) tại thời điểm trả về. Điều này có nghĩa là mọi thay đổi tiếp theo đối với chế độ xem sẽ không được cửa sổ thông tin trên bản đồ phản ánh. Để cập nhật cửa sổ thông tin vào lúc khác (ví dụ: sau khi hình ảnh đã tải), hãy gọi showInfoWindow(). Hơn nữa, cửa sổ thông tin sẽ không tuân theo bất kỳ hoạt động tương tác đặc trưng nào đối với một khung hiển thị thông thường, chẳng hạn như các sự kiện chạm hoặc cử chỉ. Tuy nhiên, bạn có thể theo dõi một sự kiện nhấp chuột chung trên toàn bộ cửa sổ thông tin như mô tả trong phần dưới đây.

Các hình ảnh bên dưới hiển thị một cửa sổ thông tin mặc định, một cửa sổ thông tin có nội dung tuỳ chỉnh và một cửa sổ thông tin có khung và nền tuỳ chỉnh.

Sự kiện cửa sổ thông tin

Mẫu MarkerdemoActivity bao gồm mã mẫu để đăng ký và xử lý các sự kiện trên cửa sổ thông tin.

Bạn có thể dùng OnInfoWindowClickListener để theo dõi các sự kiện nhấp chuột trên cửa sổ thông tin. Để thiết lập trình nghe này trên bản đồ, hãy gọi GoogleMap.setOnInfoWindowClickListener(OnInfoWindowClickListener). Khi người dùng nhấp vào một cửa sổ thông tin, onInfoWindowClick(Marker) sẽ được gọi và cửa sổ thông tin đó sẽ được làm nổi bật bằng màu đánh dấu mặc định (xám).

Kotlin



internal inner class InfoWindowActivity : AppCompatActivity(),
    OnInfoWindowClickListener,
    OnMapReadyCallback {
    override fun onMapReady(googleMap: GoogleMap) {
        // Add markers to the map and do other map setup.
        // ...
        // Set a listener for info window events.
        googleMap.setOnInfoWindowClickListener(this)
    }

    override fun onInfoWindowClick(marker: Marker) {
        Toast.makeText(
            this, "Info window clicked",
            Toast.LENGTH_SHORT
        ).show()
    }
}

Java


class InfoWindowActivity extends AppCompatActivity implements
    GoogleMap.OnInfoWindowClickListener,
    OnMapReadyCallback {

    @Override
    public void onMapReady(GoogleMap googleMap) {
        // Add markers to the map and do other map setup.
        // ...
        // Set a listener for info window events.
        googleMap.setOnInfoWindowClickListener(this);
    }

    @Override
    public void onInfoWindowClick(Marker marker) {
        Toast.makeText(this, "Info window clicked",
            Toast.LENGTH_SHORT).show();
    }
}

Tương tự, bạn có thể theo dõi các sự kiện nhấp chuột dài bằng OnInfoWindowLongClickListener. Bạn có thể đặt các sự kiện này bằng cách gọi GoogleMap.setOnInfoWindowCloseListener(OnInfoWindowCloseListener). Trình nghe này hoạt động tương tự như trình nghe lượt nhấp và sẽ được thông báo về các sự kiện nhấp chuột bằng lệnh gọi lại onInfoWindowClose(Marker).

Để nhận thông báo khi cửa sổ thông tin đóng, hãy sử dụng OnInfoWindowCloseListener mà bạn có thể đặt bằng cách gọi GoogleMap.setOnInfoWindowCloseListener(OnInfoWindowCloseListener). Bạn sẽ nhận được một lệnh gọi lại onInfoWindowClose(Marker).

Lưu ý về cách làm mới cửa sổ thông tin: Sự kiện onInfoWindowClose() sẽ kích hoạt nếu người dùng làm mới cửa sổ thông tin bằng cách nhấn vào một điểm đánh dấu đã có cửa sổ thông tin đang mở. Tuy nhiên, nếu bạn gọi Marker.showInfoWindow() theo phương thức lập trình trong một cửa sổ thông tin đang mở, thì sự kiện onInfoWindowClose() sẽ không kích hoạt. Hành vi thứ hai dựa trên giả định rằng bạn biết rằng cửa sổ thông tin sẽ đóng và mở lại.

Như đã đề cập trong phần trước về cửa sổ thông tin, cửa sổ thông tin không phải là chế độ xem trực tiếp. Thay vào đó, chế độ xem sẽ được hiển thị dưới dạng một hình ảnh trên bản đồ. Do đó, mọi trình nghe bạn đặt trên khung hiển thị đều bị bỏ qua và bạn không thể phân biệt giữa các sự kiện nhấp chuột trên nhiều phần của khung hiển thị này. Bạn không nên đặt các thành phần tương tác – chẳng hạn như nút, hộp đánh dấu hoặc mục nhập văn bản – trong cửa sổ thông tin tuỳ chỉnh của mình.