Điểm đánh dấu

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

Bản đồ có nhiều điểm đánh dấu

Điểm đánh dấu xác định vị trí trên bản đồ. Điểm đánh dấu mặc định sử dụng biểu tượng chuẩn, thường thấy trong giao diện của Google Maps. Bạn có thể thay đổi màu sắc, hình ảnh hoặc điểm neo của biểu tượng thông qua API. Điểm đánh dấu là các đối tượng thuộc loại Marker và được thêm vào bản đồ bằng phương thức GoogleMap.addMarker(markerOptions).

Điểm đánh dấu được thiết kế để có tính tương tác. Theo mặc định, các điểm đánh dấu này nhận được sự kiện click và thường được dùng với trình nghe sự kiện để hiển thị cửa sổ thông tin. Việc đặt thuộc tính draggable của điểm đánh dấu thành true cho phép người dùng thay đổi vị trí của điểm đánh dấu. Nhấn và giữ để kích hoạt khả năng di chuyển điểm đánh dấu.

Theo mặc định, khi người dùng nhấn vào một điểm đánh dấu, thanh công cụ bản đồ sẽ xuất hiện ở dưới cùng bên phải của bản đồ, giúp người dùng truy cập nhanh vào ứng dụng di động Google Maps. Bạn có thể tắt thanh công cụ này. Để biết thêm thông tin, hãy xem hướng dẫn về các chế độ kiểm soát.

Thêm một điểm đánh dấu

Ví dụ sau đây minh hoạ cách thêm điểm đánh dấu vào bản đồ. Điểm đánh dấu được tạo tại toạ độ -33.852,151.211 (Sydney, Úc) và hiển thị chuỗi "Điểm đánh dấu ở Sydney" trong cửa sổ thông tin khi người dùng nhấp vào.

Kotlin

// Add a marker in Sydney, Australia,
// and move the map's camera to the same location.
val sydney = LatLng(-33.852, 151.211)
map.addMarker(
    MarkerOptions()
        .position(sydney)
        .title("Marker in Sydney"),
)
map.moveCamera(CameraUpdateFactory.newLatLng(sydney))

Java

// Add a marker in Sydney, Australia,
// and move the map's camera to the same location.
LatLng sydney = new LatLng(-33.852, 151.211);
map.addMarker(new MarkerOptions().position(sydney).title("Marker in Sydney"));
map.moveCamera(CameraUpdateFactory.newLatLng(sydney));

Hiện thêm thông tin về điểm đánh dấu

Yêu cầu phổ biến là hiển thị thêm thông tin về một địa điểm hoặc vị trí khi người dùng nhấn vào một điểm đánh dấu trên bản đồ. Xem hướng dẫn về cửa sổ thông tin.

Liên kết dữ liệu với điểm đánh dấu

Bạn có thể lưu trữ một đối tượng dữ liệu tuỳ ý bằng điểm đánh dấu bằng cách sử dụng Marker.setTag() và truy xuất đối tượng dữ liệu bằng cách sử dụng Marker.getTag(). Mẫu dưới đây cho thấy cách bạn có thể đếm số lần một điểm đánh dấu được nhấp bằng cách sử dụng thẻ:

Kotlin

val PERTH = LatLng(-31.952854, 115.857342)
val SYDNEY = LatLng(-33.87365, 151.20689)
val BRISBANE = LatLng(-27.47093, 153.0235)

val markerPerth = map.addMarker(
    MarkerOptions()
        .position(PERTH)
        .title("Perth"),
)
markerPerth?.tag = 0

val markerSydney = map.addMarker(
    MarkerOptions()
        .position(SYDNEY)
        .title("Sydney"),
)
markerSydney?.tag = 0

val markerBrisbane = map.addMarker(
    MarkerOptions()
        .position(BRISBANE)
        .title("Brisbane"),
)
markerBrisbane?.tag = 0

// Set a listener for marker click.
map.setOnMarkerClickListener { marker ->
    // Retrieve the data from the marker.
    val clickCount = marker.tag as? Int

    // Check if a click count was set, then display the click count.
    clickCount?.let {
        val newClickCount = it + 1
        marker.tag = newClickCount
        Toast.makeText(
            context,
            "${marker.title} has been clicked $newClickCount times.",
            Toast.LENGTH_SHORT,
        ).show()
    }

    // Return false to indicate default behavior.
    false
}

Java

final LatLng PERTH = new LatLng(-31.952854, 115.857342);
final LatLng SYDNEY = new LatLng(-33.87365, 151.20689);
final LatLng BRISBANE = new LatLng(-27.47093, 153.0235);

Marker markerPerth = map.addMarker(new MarkerOptions().position(PERTH).title("Perth"));
markerPerth.setTag(0);

Marker markerSydney = map.addMarker(new MarkerOptions().position(SYDNEY).title("Sydney"));
markerSydney.setTag(0);

Marker markerBrisbane =
        map.addMarker(new MarkerOptions().position(BRISBANE).title("Brisbane"));
markerBrisbane.setTag(0);

// Set a listener for marker click.
map.setOnMarkerClickListener(
        new GoogleMap.OnMarkerClickListener() {
            @Override
            public boolean onMarkerClick(final Marker marker) {
                // Retrieve the data from the marker.
                Integer clickCount = (Integer) marker.getTag();

                // Check if a click count was set, then display the click count.
                if (clickCount != null) {
                    clickCount = clickCount + 1;
                    marker.setTag(clickCount);
                    Toast.makeText(
                                    context,
                                    marker.getTitle()
                                            + " has been clicked "
                                            + clickCount
                                            + " times.",
                                    Toast.LENGTH_SHORT)
                            .show();
                }

                // Return false to indicate default behavior should occur.
                return false;
            }
        });

Dưới đây là một số ví dụ về trường hợp nên lưu trữ và truy xuất dữ liệu bằng điểm đánh dấu:

  • Ứng dụng của bạn có thể phục vụ cho nhiều loại điểm đánh dấu và bạn muốn xử lý các điểm đánh dấu đó theo cách khác nhau khi người dùng nhấp vào. Để thực hiện việc này, bạn có thể lưu trữ String bằng điểm đánh dấu cho biết loại.
  • Bạn có thể đang giao tiếp với một hệ thống có giá trị nhận dạng bản ghi riêng biệt, trong đó các điểm đánh dấu đại diện cho các bản ghi cụ thể trong hệ thống đó.
  • Dữ liệu điểm đánh dấu có thể cho biết mức độ ưu tiên được sử dụng khi quyết định chỉ mục z của một điểm đánh dấu.

Cho phép kéo điểm đánh dấu

Bạn có thể đặt lại vị trí của điểm đánh dấu sau khi thêm điểm đánh dấu đó vào bản đồ, miễn là thuộc tính draggable của điểm đánh dấu được đặt thành true. Nhấn và giữ điểm đánh dấu để bật tính năng kéo. Khi bạn nhấc ngón tay khỏi màn hình, điểm đánh dấu sẽ vẫn ở vị trí đó.

Theo mặc định, bạn không thể kéo điểm đánh dấu. Bạn phải đặt rõ ràng điểm đánh dấu thành có thể kéo bằng MarkerOptions.draggable(boolean) trước khi thêm điểm đánh dấu vào bản đồ hoặc Marker.setDraggable(boolean) sau khi thêm điểm đánh dấu vào bản đồ. Bạn có thể theo dõi các sự kiện kéo trên điểm đánh dấu, như mô tả trong phần Sự kiện kéo điểm đánh dấu.

Đoạn mã dưới đây thêm một điểm đánh dấu có thể kéo tại Perth, Úc.

Kotlin

val perthLocation = LatLng(-31.90, 115.86)
val perth = map.addMarker(
    MarkerOptions()
        .position(perthLocation)
        .draggable(true),
)

Java

final LatLng perthLocation = new LatLng(-31.90, 115.86);
Marker perth = map.addMarker(new MarkerOptions().position(perthLocation).draggable(true));

Tuỳ chỉnh điểm đánh dấu

Video này trình bày các cách sử dụng điểm đánh dấu để trực quan hoá vị trí trên bản đồ.

Điểm đánh dấu có thể xác định một hình ảnh tuỳ chỉnh để hiển thị thay cho biểu tượng mặc định. Việc xác định biểu tượng bao gồm việc đặt một số thuộc tính ảnh hưởng đến hành vi trực quan của điểm đánh dấu.

Điểm đánh dấu hỗ trợ tuỳ chỉnh thông qua các thuộc tính sau:

Chức vụ (Bắt buộc)
Giá trị LatLng cho vị trí của điểm đánh dấu trên bản đồ. Đây là thuộc tính bắt buộc duy nhất cho đối tượng Marker.
Neo
Điểm trên hình ảnh sẽ được đặt tại vị trí LatLng của điểm đánh dấu. Vị trí mặc định là ở giữa phía dưới cùng của hình ảnh.
Alpha
Đặt độ mờ của điểm đánh dấu. Giá trị mặc định là 1.0.
Tiêu đề
Một chuỗi xuất hiện trong cửa sổ thông tin khi người dùng nhấn vào điểm đánh dấu.
Đoạn trích
Văn bản bổ sung xuất hiện bên dưới tiêu đề.
Biểu tượng
Bitmap hiển thị thay cho hình ảnh điểm đánh dấu mặc định.
Kéo được
Đặt thành true nếu bạn muốn cho phép người dùng di chuyển điểm đánh dấu. Mặc định là false.
Hiển thị
Đặt thành false để ẩn điểm đánh dấu. Giá trị mặc định là true.
Hướng phẳng hoặc hướng bảng quảng cáo
Theo mặc định, điểm đánh dấu sử dụng hướng biển quảng cáo, nghĩa là chúng được vẽ theo hướng màn hình của thiết bị thay vì hướng bề mặt bản đồ. Việc xoay, nghiêng hoặc thu phóng bản đồ không làm thay đổi hướng của điểm đánh dấu. Bạn có thể đặt hướng của điểm đánh dấu phẳng so với trái đất. Điểm đánh dấu phẳng sẽ xoay khi bản đồ xoay và thay đổi phối cảnh khi bản đồ nghiêng. Giống như điểm đánh dấu bảng quảng cáo, điểm đánh dấu phẳng giữ nguyên kích thước khi bản đồ được phóng to hoặc thu nhỏ.
Xoay
Hướng của điểm đánh dấu, được chỉ định theo độ theo chiều kim đồng hồ. Vị trí mặc định sẽ thay đổi nếu điểm đánh dấu phẳng. Vị trí mặc định cho điểm đánh dấu phẳng là căn chỉnh theo hướng bắc. Khi điểm đánh dấu không phẳng, vị trí mặc định sẽ hướng lên trên và chế độ xoay sẽ sao cho điểm đánh dấu luôn hướng về phía camera.

Đoạn mã dưới đây tạo một điểm đánh dấu đơn giản, có biểu tượng mặc định.

Kotlin

val melbourneLocation = LatLng(-37.813, 144.962)
val melbourne = map.addMarker(
    MarkerOptions()
        .position(melbourneLocation),
)

Java

final LatLng melbourneLocation = new LatLng(-37.813, 144.962);
Marker melbourne = map.addMarker(new MarkerOptions().position(melbourneLocation));

Tuỳ chỉnh màu của điểm đánh dấu

Bạn có thể tuỳ chỉnh màu của hình ảnh điểm đánh dấu mặc định bằng cách truyền đối tượng BitmapDescriptor đến phương thức icon(). Bạn có thể sử dụng một tập hợp màu được xác định trước trong đối tượng BitmapDescriptorFactory hoặc đặt màu điểm đánh dấu tuỳ chỉnh bằng phương thức BitmapDescriptorFactory.defaultMarker(float hue). Sắc độ là một giá trị từ 0 đến 360, đại diện cho các điểm trên bánh xe màu.

Kotlin

val melbourneLocation = LatLng(-37.813, 144.962)
val melbourne = map.addMarker(
    MarkerOptions()
        .position(melbourneLocation)
        .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE)),
)

Java

final LatLng melbourneLocation = new LatLng(-37.813, 144.962);
Marker melbourne =
        map.addMarker(
                new MarkerOptions()
                        .position(melbourneLocation)
                        .icon(
                                BitmapDescriptorFactory.defaultMarker(
                                        BitmapDescriptorFactory.HUE_AZURE)));

Tuỳ chỉnh độ mờ của điểm đánh dấu

Bạn có thể kiểm soát độ mờ của điểm đánh dấu bằng phương thức MarkerOptions.alpha(). Alpha phải được chỉ định dưới dạng số thực có độ chính xác đơn từ 0 đến 1, trong đó 0 là hoàn toàn trong suốt và 1 là hoàn toàn mờ.

Kotlin

val melbourneLocation = LatLng(-37.813, 144.962)
val melbourne = map.addMarker(
    MarkerOptions()
        .position(melbourneLocation)
        .alpha(0.7f),
)

Java

final LatLng melbourneLocation = new LatLng(-37.813, 144.962);
Marker melbourne =
        map.addMarker(new MarkerOptions().position(melbourneLocation).alpha(0.7f));

Tuỳ chỉnh hình ảnh điểm đánh dấu

Bạn có thể thay thế hình ảnh điểm đánh dấu mặc định bằng hình ảnh điểm đánh dấu tuỳ chỉnh, thường được gọi là biểu tượng. Biểu tượng tuỳ chỉnh luôn được đặt làm BitmapDescriptor và được xác định bằng một trong các phương thức trong lớp BitmapDescriptorFactory.

fromAsset(String assetName)
Tạo điểm đánh dấu tuỳ chỉnh bằng tên của hình ảnh Bitmap trong thư mục tài sản.
fromBitmap(Bitmap image)
Tạo điểm đánh dấu tuỳ chỉnh từ hình ảnh Bitmap.
fromFile(String fileName)
Tạo biểu tượng tuỳ chỉnh bằng tên của tệp hình ảnh Bitmap nằm trong bộ nhớ trong.
fromPath(String absolutePath)
Tạo điểm đánh dấu tuỳ chỉnh từ đường dẫn tệp tuyệt đối của hình ảnh Bitmap.
fromResource(int resourceId)
Tạo điểm đánh dấu tuỳ chỉnh bằng mã tài nguyên của hình ảnh Bitmap.

Đoạn mã dưới đây tạo một điểm đánh dấu có biểu tượng tuỳ chỉnh.

Kotlin

val melbourneLocation = LatLng(-37.813, 144.962)
val melbourne = map.addMarker(
    MarkerOptions()
        .position(melbourneLocation)
        .title("Melbourne")
        .snippet("Population: 4,137,400")
        .icon(BitmapDescriptorFactory.fromResource(R.drawable.arrow)),
)

Java

final LatLng melbourneLocation = new LatLng(-37.813, 144.962);
Marker melbourne =
        map.addMarker(
                new MarkerOptions()
                        .position(melbourneLocation)
                        .title("Melbourne")
                        .snippet("Population: 4,137,400")
                        .icon(BitmapDescriptorFactory.fromResource(R.drawable.arrow)));

Làm phẳng điểm đánh dấu

Biểu tượng điểm đánh dấu thường được vẽ theo màn hình; việc xoay, nghiêng hoặc thu phóng bản đồ sẽ không thay đổi hướng của điểm đánh dấu. Bạn có thể đặt hướng của điểm đánh dấu phẳng so với trái đất. Điểm đánh dấu được định hướng theo cách này sẽ xoay khi bản đồ xoay và thay đổi phối cảnh khi bản đồ nghiêng. Điểm đánh dấu phẳng sẽ giữ nguyên kích thước khi bản đồ được phóng to hoặc thu nhỏ.

Để thay đổi hướng của điểm đánh dấu, hãy đặt thuộc tính flat của điểm đánh dấu thành true.

Kotlin

val perthLocation = LatLng(-31.90, 115.86)
val perth = map.addMarker(
    MarkerOptions()
        .position(perthLocation)
        .flat(true),
)

Java

final LatLng perthLocation = new LatLng(-31.90, 115.86);
Marker perth = map.addMarker(new MarkerOptions().position(perthLocation).flat(true));

Xoay điểm đánh dấu

Bạn có thể xoay điểm đánh dấu xung quanh điểm neo của điểm đánh dấu đó bằng Marker.setRotation() phương thức. Góc xoay được đo bằng độ theo chiều kim đồng hồ từ vị trí mặc định. Khi điểm đánh dấu nằm phẳng trên bản đồ, vị trí mặc định là hướng Bắc. Khi điểm đánh dấu không phẳng, vị trí mặc định sẽ hướng lên trên và chế độ xoay sẽ sao cho điểm đánh dấu luôn hướng về phía camera.

Ví dụ dưới đây xoay điểm đánh dấu 90°. Việc đặt điểm neo thành 0.5,0.5 khiến điểm đánh dấu được xoay quanh tâm thay vì xoay quanh chân đế.

Kotlin

val perthLocation = LatLng(-31.90, 115.86)
val perth = map.addMarker(
    MarkerOptions()
        .position(perthLocation)
        .anchor(0.5f, 0.5f)
        .rotation(90.0f),
)

Java

final LatLng perthLocation = new LatLng(-31.90, 115.86);
Marker perth =
        map.addMarker(
                new MarkerOptions()
                        .position(perthLocation)
                        .anchor(0.5f, 0.5f)
                        .rotation(90.0f));

Chỉ mục z của điểm đánh dấu

Chỉ mục z chỉ định thứ tự xếp chồng của điểm đánh dấu này so với các điểm đánh dấu khác trên bản đồ. Điểm đánh dấu có chỉ mục z cao được vẽ trên các điểm đánh dấu có chỉ mục z thấp hơn. Giá trị mặc định của chỉ mục z là 0.

Đặt chỉ mục z trên đối tượng tuỳ chọn của điểm đánh dấu bằng cách gọi MarkerOptions.zIndex(), như trong đoạn mã sau:

Kotlin

map.addMarker(
    MarkerOptions()
        .position(LatLng(10.0, 10.0))
        .title("Marker z1")
        .zIndex(1.0f),
)

Java

map.addMarker(
        new MarkerOptions().position(new LatLng(10, 10)).title("Marker z1").zIndex(1.0f));

Bạn có thể truy cập vào chỉ mục z của điểm đánh dấu bằng cách gọi Marker.getZIndex() và có thể thay đổi chỉ mục đó bằng cách gọi Marker.setZIndex().

Điểm đánh dấu luôn được vẽ phía trên các lớp ô và các lớp phủ không phải điểm đánh dấu khác (lớp phủ mặt đất, hình nhiều đường, đa giác và các hình dạng khác) bất kể chỉ mục z của các lớp phủ khác. Điểm đánh dấu được coi là nằm trong một nhóm chỉ mục z riêng biệt so với các lớp phủ khác.

Đọc về ảnh hưởng của chỉ mục z đối với sự kiện nhấp chuột bên dưới.

Xử lý sự kiện điểm đánh dấu

Maps API cho phép bạn theo dõi và phản hồi các sự kiện của điểm đánh dấu. Để nghe các sự kiện này, bạn phải đặt trình nghe tương ứng trên đối tượng GoogleMap mà điểm đánh dấu thuộc về. Khi sự kiện xảy ra trên một trong các điểm đánh dấu trên bản đồ, lệnh gọi lại của trình nghe sẽ được gọi bằng đối tượng Marker tương ứng được truyền qua dưới dạng tham số. Để so sánh đối tượng Marker này với tham chiếu của riêng bạn đến một đối tượng Marker, bạn phải sử dụng equals() chứ không phải ==.

Bạn có thể theo dõi các sự kiện sau:

Sự kiện nhấp chuột vào điểm đánh dấu

Bạn có thể sử dụng OnMarkerClickListener để lắng nghe các sự kiện nhấp chuột vào điểm đánh dấu. Để đặt trình nghe này trên bản đồ, hãy gọi GoogleMap.setOnMarkerClickListener(OnMarkerClickListener). Khi người dùng nhấp vào một điểm đánh dấu, onMarkerClick(Marker) sẽ được gọi và điểm đánh dấu sẽ được truyền dưới dạng đối số. Phương thức này trả về một giá trị boolean cho biết liệu bạn đã sử dụng sự kiện hay chưa (tức là bạn muốn chặn hành vi mặc định). Nếu hàm này trả về false, thì hành vi mặc định sẽ xảy ra ngoài hành vi tuỳ chỉnh của bạn. Hành vi mặc định cho sự kiện nhấp vào điểm đánh dấu là hiển thị cửa sổ thông tin (nếu có) và di chuyển camera sao cho điểm đánh dấu nằm ở giữa bản đồ.

Ảnh hưởng của chỉ mục z đối với sự kiện nhấp chuột:

  • Khi người dùng nhấp vào một cụm điểm đánh dấu, sự kiện nhấp chuột sẽ được kích hoạt cho điểm đánh dấu có chỉ mục z cao nhất.
  • Mỗi lượt nhấp chỉ kích hoạt tối đa một sự kiện. Nói cách khác, lượt nhấp không được chuyển đến điểm đánh dấu hoặc lớp phủ khác có giá trị chỉ mục z thấp hơn.
  • Khi bạn nhấp vào một cụm điểm đánh dấu, các lượt nhấp tiếp theo sẽ chuyển qua cụm đó, lần lượt chọn từng điểm đánh dấu. Thứ tự của chu kỳ trước tiên sẽ ưu tiên chỉ mục z, sau đó là mức độ gần với điểm nhấp.
  • Nếu người dùng nhấp vào bên ngoài vùng lân cận của cụm, API sẽ tính toán lại cụm và đặt lại trạng thái của chu kỳ nhấp để bắt đầu từ đầu.
  • Điểm đánh dấu được coi là nằm trong một nhóm chỉ mục z riêng biệt so với các lớp phủ hoặc hình dạng khác (hình nhiều đường, đa giác, hình tròn và/hoặc lớp phủ mặt đất), bất kể chỉ mục z của các lớp phủ khác. Nếu nhiều điểm đánh dấu, lớp phủ hoặc hình dạng được xếp chồng lên nhau, thì sự kiện nhấp chuột sẽ được chuyển qua cụm điểm đánh dấu trước tiên.

Sự kiện kéo điểm đánh dấu

Bạn có thể sử dụng OnMarkerDragListener để theo dõi các sự kiện kéo trên điểm đánh dấu. Để đặt trình nghe này trên bản đồ, hãy gọi GoogleMap.setOnMarkerDragListener. Để kéo điểm đánh dấu, người dùng phải nhấn và giữ điểm đánh dấu đó. Khi người dùng nhấc ngón tay khỏi màn hình, điểm đánh dấu sẽ ở nguyên vị trí đó. Khi một điểm đánh dấu được kéo, onMarkerDragStart(Marker) sẽ được gọi ban đầu. Trong khi điểm đánh dấu đang được kéo, onMarkerDrag(Marker) sẽ được gọi liên tục. Khi kết thúc thao tác kéo, onMarkerDragEnd(Marker) sẽ được gọi. Bạn có thể lấy vị trí của điểm đánh dấu bất cứ lúc nào bằng cách gọi Marker.getPosition().