Cửa sổ thông tin

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

Cửa sổ thông tin sẽ 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 được liên kết với một điểm đánh dấu. Hành vi mặc định của người dùng là hiển thị khi họ 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ả tính năng của 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ỉ có một cửa sổ thông tin hiển thị. 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 hiện đang hiển thị cửa sổ thông tin, thì cửa sổ thông tin đó sẽ đóng và mở lại.

Cửa sổ thông tin được vẽ hướng về màn hình của thiết bị, căn giữa phía trên điểm đánh dấu được liên kết. Cửa sổ thông tin mặc định chứa tiêu đề ở dạng in đậm, cùng 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 cửa sổ thông tin là đặt phương thức title()snippet() của điểm đánh dấu tương ứng. Việc đặt các thuộc tính này sẽ làm cho cửa sổ thông tin xuất hiện bất cứ khi nào điểm đánh dấu đó được nhấp vào.

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"));

      

Kotlin


val melbourneLatLng = LatLng(-37.81319, 144.96298)
val melbourne = map.addMarker(
    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ể lập trình cửa sổ thông tin bằng cách gọi showInfoWindow() trên điểm đánh dấu mục tiêu. Bạn có thể ẩn cửa sổ thông tin bằng cách gọi hideInfoWindow().

Java


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

      

Kotlin


val melbourneLatLng = LatLng(-37.81319, 144.96298)
val melbourne = map.addMarker(
    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 theo cụm. Hãy đọc hướng dẫn để thêm cửa sổ thông tin cho từng điểm đánh dấu được phân nhóm.

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

Bạn cũng có thể tùy chỉnh nội dung và thiết kế của cửa sổ thông tin. Để làm điều 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() khi triển khai. Giao diện chứa hai phương thức để bạn triển khai: getInfoWindow(Marker)getInfoContents(Marker). Trước tiên, API sẽ gọi getInfoWindow(Marker) và nếu null được trả về, API sẽ gọi getInfoContents(Marker). Nếu giá trị này cũng trả về null, cửa sổ thông tin mặc định sẽ được sử dụng.

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

Hình ảnh bên dưới cho thấy một cửa sổ thông tin mặc định, cửa sổ thông tin có nội dung được tuỳ chỉnh và cửa sổ thông tin có khung và nền tuỳ chỉnh.

So sánh cửa sổ thông tin

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

Mẫu MarkerDemoActivity có mã mẫu để đăng ký và xử lý các sự kiện trong cửa sổ thông tin.

Bạn có thể sử dụng OnInfoWindowClickListener để nghe các sự kiện 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 được làm nổi bật bằng màu đánh dấu mặc định (xám).

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();
    }
}

      

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()
    }
}

      

Tương tự, bạn có thể theo dõi các sự kiện nhấp và giữ bằng một OnInfoWindowLongClickListener mà bạn có thể đặt 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 lâu 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 lệnh gọi lại onInfoWindowClose(Marker).

Lưu ý về việc 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 lập trình gọi Marker.showInfoWindow() trên 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 được hiển thị dưới dạng hình ảnh trên bản đồ. Do đó, mọi trình nghe mà bạn đặt trên chế độ xem sẽ bị bỏ qua và bạn không thể phân biệt các sự kiện nhấp chuột trên nhiều phần của chế độ xem. Bạn không nên đặt các thành phần tương tác — chẳng hạn như các nút, hộp đánh dấu hoặc nội dung nhập văn bản — trong cửa sổ thông tin tuỳ chỉnh của mình.