Hình dạng

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

Bản đồ có một đường nhiều đoạn màu đỏ liền nét

API Google Maps cho Android cung cấp một số cách đơn giản để bạn thêm hình dạng vào bản đồ nhằm tuỳ chỉnh bản đồ cho ứng dụng của bạn.

  • Polyline là một chuỗi các đoạn thẳng nối liền nhau có thể tạo thành bất kỳ hình dạng nào bạn muốn và có thể dùng để đánh dấu các đường đi và tuyến đường trên bản đồ.
  • Polygon là một hình dạng khép kín có thể dùng để đánh dấu các khu vực trên bản đồ.
  • Circle là hình chiếu chính xác về mặt địa lý của một vòng tròn trên bề mặt Trái Đất được vẽ trên bản đồ.

Đối với tất cả các hình dạng này, bạn có thể tuỳ chỉnh giao diện của chúng bằng cách thay đổi một số thuộc tính.

Mã mẫu

Hướng dẫn về cách thêm đa giác và hình nhiều đường để biểu thị các khu vực và tuyến đường bao gồm tất cả mã cho một ứng dụng Android đơn giản.

Ngoài ra, kho lưu trữ ApiDemos trên GitHub còn có các mẫu minh hoạ cách sử dụng hình dạng và các tính năng của hình dạng:

  • CircleDemoActivity (Java / Kotlin): Hình tròn
  • PolygonDemoActivity (Java / Kotlin): Đa giác
  • PolylineDemoActivity (Java / Kotlin): Hình nhiều đường

Đường nhiều đoạn

Lớp Polyline xác định một tập hợp các đoạn thẳng được kết nối trên bản đồ. Đối tượng Polyline bao gồm một tập hợp các vị trí LatLng và tạo một loạt các đoạn thẳng nối các vị trí đó theo một trình tự có thứ tự.

Video này đưa ra ý tưởng về cách giúp người dùng đến được nơi họ muốn, bằng cách sử dụng hình nhiều đường để vẽ một đường dẫn trên bản đồ.

Để tạo một Polyline, trước tiên, hãy tạo một đối tượng PolylineOptions rồi thêm các điểm vào đối tượng đó. Điểm đại diện cho một điểm trên bề mặt trái đất và được biểu thị dưới dạng đối tượng LatLng. Các đoạn thẳng được vẽ giữa các điểm theo thứ tự mà bạn thêm các điểm đó vào đối tượng PolylineOptions.

Để thêm các điểm vào đối tượng PolylineOptions, hãy gọi PolylineOptions.add(). Lưu ý rằng phương thức này lấy một số lượng biến của tham số để bạn có thể thêm nhiều điểm cùng một lúc (bạn cũng có thể gọi PolylineOptions.addAll(Iterable<LatLng>) nếu các điểm đã có trong danh sách).

Sau đó, bạn có thể thêm hình nhiều đường vào bản đồ bằng cách gọi GoogleMap.addPolyline(PolylineOptions). Phương thức này trả về một đối tượng Polyline mà bạn có thể dùng để thay đổi hình nhiều đường sau này.

Đoạn mã sau đây minh hoạ cách thêm hình chữ nhật vào bản đồ:

Kotlin

// Instantiates a new Polyline object and adds points to define a rectangle
val polylineOptions = PolylineOptions()
    .add(LatLng(37.35, -122.0))
    .add(LatLng(37.45, -122.0)) // North of the previous point, but at the same longitude
    .add(LatLng(37.45, -122.2)) // Same latitude, and 30km to the west
    .add(LatLng(37.35, -122.2)) // Same longitude, and 16km to the south
    .add(LatLng(37.35, -122.0)) // Closes the polyline.

// Get back the mutable Polyline
val polyline = map.addPolyline(polylineOptions)
polyline?.let {
    val isClickable = it.isClickable
    val isGeodesic = it.isGeodesic
    val isVisible = it.isVisible
    val color = it.color
    val width = it.width
    val zIndex = it.zIndex
    val points = it.points
}

Java

// Instantiates a new Polyline object and adds points to define a rectangle
PolylineOptions polylineOptions = new PolylineOptions()
    .add(new LatLng(37.35, -122.0))
    .add(new LatLng(37.45, -122.0))  // North of the previous point, but at the same longitude
    .add(new LatLng(37.45, -122.2))  // Same latitude, and 30km to the west
    .add(new LatLng(37.35, -122.2))  // Same longitude, and 16km to the south
    .add(new LatLng(37.35, -122.0)); // Closes the polyline.

// Get back the mutable Polyline
Polyline polyline = map.addPolyline(polylineOptions);

Hình chữ nhật xuất hiện trên bản đồ như dưới đây:

Bản đồ có hình chữ nhật nhiều đường

Để thay đổi hình dạng của hình nhiều đường sau khi thêm, bạn có thể gọi Polyline.setPoints() và cung cấp một danh sách điểm mới cho hình nhiều đường.

Bạn có thể tuỳ chỉnh giao diện của đường nhiều đoạn trước khi thêm vào bản đồ và sau khi thêm vào bản đồ. Hãy xem phần về tuỳ chỉnh giao diện bên dưới để biết thêm thông tin chi tiết.

Tuỳ chỉnh hình nhiều đường

Có một số cách để tuỳ chỉnh giao diện của đường nhiều đoạn:

  • Đường nhiều màu đặt các đoạn đường thành nhiều màu.
  • Đường nhiều đoạn chuyển màu tô màu một đường nhiều đoạn bằng dải chuyển màu gồm 2 màu.
  • Đường nhiều đoạn được đóng dấu tạo kiểu cho đường nhiều đoạn bằng cách sử dụng các bitmap lặp lại.

Để sử dụng tính năng Tuỳ chỉnh hình nhiều đường, bạn phải dùng SDK Maps cho Android phiên bản 18.1.0 trở lên và dùng trình kết xuất SDK Maps cho Android mới nhất.

Tạo hình nhiều đường có nhiều màu

Bản đồ có hình nhiều đường đa sắc

Bạn có thể sử dụng các đoạn để tô màu riêng cho từng đoạn của một hình nhiều đường bằng cách tạo các đối tượng StyleSpan và thêm các đối tượng đó vào PolylineOptions bằng phương thức addSpan() hoặc addSpans(). Theo mặc định, mỗi mục trong mảng sẽ đặt màu cho đoạn thẳng tương ứng. Ví dụ sau đây cho thấy cách đặt màu cho đoạn để tạo một hình nhiều đường có các đoạn màu đỏ và màu xanh lục:

Kotlin

val line = map.addPolyline(
    PolylineOptions()
        .add(LatLng(47.6677146, -122.3470447), LatLng(47.6442757, -122.2814693))
        .addSpan(StyleSpan(Color.RED))
        .addSpan(StyleSpan(Color.GREEN))
)

Java

Polyline line = map.addPolyline(new PolylineOptions()
        .add(new LatLng(47.6677146,-122.3470447), new LatLng(47.6442757,-122.2814693))
        .addSpan(new StyleSpan(Color.RED))
        .addSpan(new StyleSpan(Color.GREEN)));

Tạo hình nhiều đường chuyển màu

Bản đồ có hình nhiều đường chuyển màu

Bạn có thể xác định dải chuyển màu bằng cách chỉ định hai số nguyên 32 bit alpha-red-green-blue (ARGB) để chỉ định màu bắt đầu và màu kết thúc của nét vẽ. Đặt thuộc tính này trên đối tượng tuỳ chọn của hình dạng bằng cách gọi PolylineOptions.addSpan(). Ví dụ sau đây minh hoạ cách tạo một đường đa tuyến chuyển màu từ đỏ sang vàng từ Vườn thú Woodland Park đến Kirkland, WA.

Kotlin

val line = map.addPolyline(
    PolylineOptions()
        .add(LatLng(47.6677146, -122.3470447), LatLng(47.6442757, -122.2814693))
        .addSpan(
            StyleSpan(
                StrokeStyle.gradientBuilder(
                    Color.RED,
                    Color.YELLOW
                ).build()
            )
        )
)

Java

Polyline line = map.addPolyline(new PolylineOptions()
        .add(new LatLng(47.6677146,-122.3470447), new LatLng(47.6442757,-122.2814693))
        .addSpan(new StyleSpan(StrokeStyle.gradientBuilder(Color.RED, Color.YELLOW).build())));

Tạo một đường nhiều đoạn được đóng dấu

Bản đồ có đường nhiều đoạn được đóng dấu

Bạn có thể đặt giao diện của một hình nhiều đường thành một hoạ tiết bitmap lặp lại. Để thực hiện việc này, hãy tạo một StampStyle của TextureStyle, sau đó đặt thuộc tính này trên đối tượng lựa chọn của hình dạng bằng cách gọi PolylineOptions.addSpan() như minh hoạ ở đây:

Kotlin

val stampStyle =
    TextureStyle.newBuilder(BitmapDescriptorFactory.fromResource(R.drawable.walking_dot)).build()
val span = StyleSpan(StrokeStyle.colorBuilder(Color.RED).stamp(stampStyle).build())
map.addPolyline(
    PolylineOptions()
        .add(LatLng(47.6677146, -122.3470447), LatLng(47.6442757, -122.2814693))
        .addSpan(span)
)

Java

StampStyle stampStyle =
        TextureStyle.newBuilder(BitmapDescriptorFactory.fromResource(R.drawable.walking_dot)).build();
StyleSpan span = new StyleSpan(StrokeStyle.colorBuilder(Color.RED).stamp(stampStyle).build());
map.addPolyline(new PolylineOptions()
        .add(new LatLng(47.6677146,-122.3470447), new LatLng(47.6442757,-122.2814693))
        .addSpan(span));

Sự kiện nhiều đường

Theo mặc định, bạn không thể nhấp vào hình nhiều đường. Bạn có thể bật và tắt khả năng nhấp bằng cách gọi Polyline.setClickable(boolean).

Sử dụng OnPolylineClickListener để theo dõi các sự kiện nhấp chuột trên một đường nhiều đoạn có thể nhấp. Để đặt trình nghe này trên bản đồ, hãy gọi GoogleMap.setOnPolylineClickListener(OnPolylineClickListener). Khi người dùng nhấp vào một đường nhiều đoạn, bạn sẽ nhận được lệnh gọi lại onPolylineClick(Polyline).

Đa giác

Các đối tượng Polygon tương tự như các đối tượng Polyline ở chỗ chúng bao gồm một chuỗi toạ độ theo một trình tự có thứ tự. Tuy nhiên, thay vì có dạng mở, đa giác được thiết kế để xác định các vùng trong một vòng lặp khép kín với phần bên trong được tô màu.

Bạn có thể thêm Polygon vào bản đồ theo cách tương tự như khi thêm Polyline. Trước tiên, hãy tạo một đối tượng PolygonOptions và thêm một số điểm vào đối tượng đó. Các điểm này sẽ tạo thành đường viền của đa giác. Sau đó, bạn thêm đa giác vào bản đồ bằng cách gọi GoogleMap.addPolygon(PolygonOptions). Thao tác này sẽ trả về một đối tượng Polygon.

Đoạn mã sau đây thêm một hình chữ nhật vào bản đồ.

Kotlin

// Instantiates a new Polygon object and adds points to define a rectangle
val rectOptions = PolygonOptions()
    .add(
        LatLng(37.35, -122.0),
        LatLng(37.45, -122.0),
        LatLng(37.45, -122.2),
        LatLng(37.35, -122.2),
        LatLng(37.35, -122.0)
    )

// Get back the mutable Polygon
val polygon = map.addPolygon(rectOptions)

Java

// Instantiates a new Polygon object and adds points to define a rectangle
PolygonOptions polygonOptions = new PolygonOptions()
    .add(new LatLng(37.35, -122.0),
        new LatLng(37.45, -122.0),
        new LatLng(37.45, -122.2),
        new LatLng(37.35, -122.2),
        new LatLng(37.35, -122.0));

// Get back the mutable Polygon
Polygon polygon = map.addPolygon(polygonOptions);

Để thay đổi hình dạng của đa giác sau khi thêm, bạn có thể gọi Polygon.setPoints() và cung cấp danh sách điểm mới cho đường viền của đa giác.

Bạn có thể tuỳ chỉnh giao diện của đa giác cả trước khi thêm đa giác đó vào bản đồ và sau khi thêm đa giác đó vào bản đồ. Hãy xem phần tuỳ chỉnh giao diện bên dưới để biết thêm thông tin chi tiết.

Tự động hoàn thành đa giác

Đa giác trong ví dụ trên bao gồm 5 toạ độ, nhưng hãy lưu ý rằng toạ độ đầu tiên và toạ độ cuối cùng nằm ở cùng một vị trí, xác định vòng lặp. Tuy nhiên, trên thực tế, vì đa giác xác định các khu vực khép kín, nên bạn không cần xác định toạ độ cuối cùng này. Nếu toạ độ cuối cùng khác với toạ độ đầu tiên, thì API sẽ tự động "đóng" đa giác bằng cách thêm toạ độ đầu tiên vào cuối chuỗi toạ độ.

Hai đa giác bên dưới tương đương nhau và việc gọi polygon.getPoints() cho từng đa giác sẽ trả về cả 4 điểm.

Kotlin

val polygon1 = map.addPolygon(
    PolygonOptions()
        .add(
            LatLng(0.0, 0.0),
            LatLng(0.0, 5.0),
            LatLng(3.0, 5.0),
            LatLng(0.0, 0.0)
        )
        .strokeColor(Color.RED)
        .fillColor(Color.BLUE)
)
val polygon2 = map.addPolygon(
    PolygonOptions()
        .add(
            LatLng(0.0, 0.0),
            LatLng(0.0, 5.0),
            LatLng(3.0, 5.0)
        )
        .strokeColor(Color.RED)
        .fillColor(Color.BLUE)
)

Java

Polygon polygon1 = map.addPolygon(new PolygonOptions()
    .add(new LatLng(0, 0),
        new LatLng(0, 5),
        new LatLng(3, 5),
        new LatLng(0, 0))
    .strokeColor(Color.RED)
    .fillColor(Color.BLUE));

Polygon polygon2 = map.addPolygon(new PolygonOptions()
    .add(new LatLng(0, 0),
        new LatLng(0, 5),
        new LatLng(3, 5))
    .strokeColor(Color.RED)
    .fillColor(Color.BLUE));

Tạo đa giác rỗng

Bạn có thể kết hợp nhiều đường dẫn trong một đối tượng Polygon để tạo các hình dạng phức tạp, chẳng hạn như vòng tròn được tô màu hoặc "hình bánh rán" (trong đó các vùng đa giác xuất hiện bên trong đa giác dưới dạng "đảo"). Các hình dạng phức tạp luôn là thành phần của nhiều đường dẫn đơn giản hơn.

Bạn phải xác định 2 đường dẫn trong cùng một khu vực. Khu vực lớn hơn trong hai khu vực sẽ xác định vùng tô và là một đa giác đơn giản không có lựa chọn bổ sung. Sau đó, truyền đường dẫn thứ hai đến phương thức addHole(). Khi đường dẫn thứ hai nhỏ hơn được đường dẫn lớn hơn bao quanh hoàn toàn, thì có vẻ như một phần của đa giác đã bị xoá. Nếu lỗ giao với đường viền của đa giác, thì đa giác sẽ được kết xuất mà không có bất kỳ phần nào được tô.

Đoạn mã bên dưới sẽ tạo một hình chữ nhật duy nhất, có một lỗ hình chữ nhật nhỏ hơn.

Kotlin

val hole = listOf(
    LatLng(1.0, 1.0),
    LatLng(1.0, 2.0),
    LatLng(2.0, 2.0),
    LatLng(2.0, 1.0),
    LatLng(1.0, 1.0)
)
val hollowPolygon = map.addPolygon(
    PolygonOptions()
        .add(
            LatLng(0.0, 0.0),
            LatLng(0.0, 5.0),
            LatLng(3.0, 5.0),
            LatLng(3.0, 0.0),
            LatLng(0.0, 0.0)
        )
        .addHole(hole)
        .fillColor(Color.BLUE)
)
hollowPolygon?.let {
    val isClickable = it.isClickable
    val isGeodesic = it.isGeodesic
    val isVisible = it.isVisible
    val fillColor = it.fillColor
    val strokeColor = it.strokeColor
    val strokeWidth = it.strokeWidth
    val zIndex = it.zIndex
    val points = it.points
    val holes = it.holes
}

Java

List<LatLng> hole = Arrays.asList(new LatLng(1, 1),
    new LatLng(1, 2),
    new LatLng(2, 2),
    new LatLng(2, 1),
    new LatLng(1, 1));
Polygon hollowPolygon = map.addPolygon(new PolygonOptions()
    .add(new LatLng(0, 0),
        new LatLng(0, 5),
        new LatLng(3, 5),
        new LatLng(3, 0),
        new LatLng(0, 0))
    .addHole(hole)
    .fillColor(Color.BLUE));

Đa giác rỗng xuất hiện trên bản đồ như dưới đây:

Bản đồ có một đường nhiều đường hình chữ nhật rỗng

Sự kiện Polygon

Theo mặc định, bạn không thể nhấp vào đa giác. Bạn có thể bật và tắt khả năng nhấp bằng cách gọi Polygon.setClickable(boolean).

Sử dụng OnPolygonClickListener để nghe các sự kiện nhấp chuột trên một đa giác có thể nhấp. Để đặt trình nghe này trên bản đồ, hãy gọi GoogleMap.setOnPolygonClickListener(OnPolygonClickListener). Khi người dùng nhấp vào một đa giác, bạn sẽ nhận được lệnh gọi lại onPolygonClick(Polygon).

Vòng tròn

Bản đồ có hình tròn

Ngoài lớp Polygon chung, Maps API cũng bao gồm các lớp cụ thể cho các đối tượng Circle để đơn giản hoá việc tạo các đối tượng này.

Để tạo một hình tròn, bạn phải chỉ định hai thuộc tính sau:

  • center làm LatLng.
  • radius tính bằng mét.

Sau đó, một vòng tròn được xác định là tập hợp tất cả các điểm trên bề mặt Trái Đất cách center đã cho radius mét. Do cách phép chiếu Mercator mà API Maps sử dụng kết xuất một hình cầu trên một bề mặt phẳng, nên hình này sẽ xuất hiện dưới dạng một hình tròn gần như hoàn hảo trên bản đồ khi nằm gần xích đạo và sẽ ngày càng không tròn (trên màn hình) khi hình tròn di chuyển ra xa xích đạo.

Để thay đổi hình dạng của hình tròn sau khi thêm, bạn có thể gọi Circle.setRadius() hoặc Circle.setCenter() và cung cấp các giá trị mới.

Bạn có thể tuỳ chỉnh giao diện của hình tròn cả trước khi thêm hình tròn vào bản đồ và sau khi thêm hình tròn vào bản đồ. Hãy xem phần tuỳ chỉnh giao diện bên dưới để biết thêm thông tin chi tiết.

Đoạn mã sau đây thêm một hình tròn vào bản đồ bằng cách tạo một đối tượng CircleOptions và gọi GoogleMap.addCircle(CircleOptions):

Kotlin

// Instantiates a new CircleOptions object and defines the center and radius
val circleOptions = CircleOptions()
    .center(LatLng(37.4, -122.1))
    .radius(1000.0) // In meters

// Get back the mutable Circle
val circle = map.addCircle(circleOptions)
circle?.let {
    val isClickable = it.isClickable
    val isVisible = it.isVisible
    val center = it.center
    val radius = it.radius
    val fillColor = it.fillColor
    val strokeWidth = it.strokeWidth
    val zIndex = it.zIndex
}

Java

// Instantiates a new CircleOptions object and defines the center and radius
CircleOptions circleOptions = new CircleOptions()
    .center(new LatLng(37.4, -122.1))
    .radius(1000); // In meters

// Get back the mutable Circle
Circle circle = map.addCircle(circleOptions);

Sự kiện tại khu chơi trò chơi arcade

Theo mặc định, bạn không thể nhấp vào các vòng tròn. Bạn có thể bật và tắt khả năng nhấp bằng cách gọi GoogleMap.addCircle() bằng CircleOptions.clickable(boolean) hoặc bằng cách gọi Circle.setClickable(boolean).

Sử dụng OnCircleClickListener để nghe các sự kiện nhấp chuột trên một vòng tròn có thể nhấp. Để đặt trình nghe này trên bản đồ, hãy gọi GoogleMap.setOnCircleClickListener(OnCircleClickListener).

Khi người dùng nhấp vào một vòng tròn, bạn sẽ nhận được lệnh gọi lại onCircleClick(Circle), như trong mã mẫu sau:

Kotlin

val circle = map.addCircle(
    CircleOptions()
        .center(LatLng(37.4, -122.1))
        .radius(1000.0)
        .strokeWidth(10f)
        .strokeColor(Color.GREEN)
        .fillColor(Color.argb(128, 255, 0, 0))
        .clickable(true)
)
map.setOnCircleClickListener {
    // Flip the r, g and b components of the circle's stroke color.
    val strokeColor = it.strokeColor xor 0x00ffffff
    it.strokeColor = strokeColor
}

Java

Circle circle = map.addCircle(new CircleOptions()
    .center(new LatLng(37.4, -122.1))
    .radius(1000)
    .strokeWidth(10)
    .strokeColor(Color.GREEN)
    .fillColor(Color.argb(128, 255, 0, 0))
    .clickable(true));

map.setOnCircleClickListener(new GoogleMap.OnCircleClickListener() {
    @Override
    public void onCircleClick(Circle circle) {
        // Flip the r, g and b components of the circle's stroke color.
        int strokeColor = circle.getStrokeColor() ^ 0x00ffffff;
        circle.setStrokeColor(strokeColor);
    }
});

Tuỳ chỉnh giao diện

Bạn có thể thay đổi giao diện của một hình dạng trước khi thêm hình dạng đó vào bản đồ (bằng cách chỉ định thuộc tính mong muốn trên đối tượng lựa chọn) hoặc sau khi thêm hình dạng đó vào bản đồ. Các phương thức getter cũng được hiển thị cho tất cả các thuộc tính để bạn có thể dễ dàng truy cập vào trạng thái hiện tại của hình dạng.

Đoạn mã sau đây thêm một hình nhiều đường màu xanh dương đậm với các đoạn trắc địa từ Melbourne đến Perth. Các phần dưới đây sẽ giải thích chi tiết hơn về những thuộc tính này.

Kotlin

val polyline = map.addPolyline(
    PolylineOptions()
        .add(LatLng(-37.81319, 144.96298), LatLng(-31.95285, 115.85734))
        .width(25f)
        .color(Color.BLUE)
        .geodesic(true)
)

Java

Polyline polyline = map.addPolyline(new PolylineOptions()
    .add(new LatLng(-37.81319, 144.96298), new LatLng(-31.95285, 115.85734))
    .width(25)
    .color(Color.BLUE)
    .geodesic(true));

Bản đồ sẽ xuất hiện như bên dưới:

Bản đồ có hình nhiều đường từ Melbourne đến Perth

Lưu ý: Mặc dù hầu hết các thuộc tính này đều có thể áp dụng cho bất kỳ hình dạng nào được mô tả, nhưng một số thuộc tính có thể không phù hợp với một số hình dạng nhất định (ví dụ: Polyline không thể có màu nền vì không có phần bên trong).

Màu nét

Màu nét vẽ là một số nguyên 32 bit alpha-đỏ-xanh lục-xanh dương (ARGB) chỉ định độ mờ và màu của nét vẽ hình dạng. Đặt thuộc tính này trên đối tượng lựa chọn của hình dạng bằng cách gọi *Options.strokeColor() (hoặc PolylineOptions.color() trong trường hợp là đường nhiều đoạn). Nếu không được chỉ định, màu nét vẽ mặc định là màu đen (Color.BLACK).

Sau khi thêm hình dạng vào bản đồ, bạn có thể truy cập vào màu nét vẽ bằng cách gọi getStrokeColor() (hoặc getColor() cho hình nhiều đường) và có thể thay đổi bằng cách gọi setStrokeColor() (setColor() for a polyline).

Màu nền

Màu nền chỉ áp dụng cho đa giác và hình tròn. Thuộc tính này không áp dụng cho hình nhiều đường vì hình nhiều đường không có phần bên trong được xác định. Đối với một đa giác, các vùng bên trong lỗ của đa giác không thuộc phần bên trong của đa giác và sẽ không được tô màu nền nếu bạn đặt màu nền.

Màu nền là một số nguyên 32 bit alpha-đỏ-xanh lục-xanh dương (ARGB) chỉ định độ mờ và màu của phần bên trong hình dạng. Đặt thuộc tính này trên đối tượng lựa chọn của hình dạng bằng cách gọi *Options.fillColor(). Nếu không được chỉ định, màu nét vẽ mặc định sẽ là trong suốt (Color.TRANSPARENT).

Sau khi thêm hình dạng vào bản đồ, bạn có thể truy cập vào màu nền bằng cách gọi getFillColor() và có thể thay đổi màu nền bằng cách gọi setFillColor().

Độ rộng nét

Chiều rộng của nét vẽ đường kẻ, dưới dạng số thực tính bằng pixel (px). Chiều rộng không được điều chỉnh khi bản đồ được thu phóng (tức là một hình dạng sẽ có cùng chiều rộng nét vẽ ở mọi mức thu phóng). Đặt thuộc tính này trên đối tượng lựa chọn của hình dạng bằng cách gọi *Options.strokeWidth() (hoặc PolylineOptions.width() cho một đường nhiều đoạn). Nếu không chỉ định, nét vẽ mặc định sẽ là 10 pixel.

Sau khi thêm hình dạng vào bản đồ, bạn có thể truy cập vào độ rộng nét bằng cách gọi getStrokeWidth() (hoặc getWidth() cho một đường nhiều đoạn) và có thể thay đổi bằng cách gọi setStrokeWidth() (setWidth() for a polyline).

Mẫu nét vẽ

Mẫu nét vẽ mặc định là một đường liền cho hình nhiều đường và cho đường viền của đa giác và hình tròn. Bạn có thể chỉ định một mẫu nét vẽ tuỳ chỉnh của các đối tượng PatternItem, trong đó mỗi mục là một dấu gạch ngang, một dấu chấm hoặc một khoảng trống.

Mẫu sau đây đặt mẫu cho một hình nhiều đường thành một chuỗi lặp lại gồm một dấu chấm, theo sau là một khoảng trống có độ dài 20 pixel, một dấu gạch ngang có độ dài 30 pixel và một khoảng trống khác có độ dài 20 pixel.

Kotlin

val pattern = listOf(
    Dot(), Gap(20F), Dash(30F), Gap(20F)
)
polyline?.pattern = pattern

Java

List<PatternItem> pattern = Arrays.asList(
    new Dot(), new Gap(20), new Dash(30), new Gap(20));
polyline.setPattern(pattern);

Mẫu lặp lại dọc theo đường, bắt đầu bằng mục mẫu đầu tiên tại đỉnh đầu tiên được chỉ định cho hình dạng.

Loại khớp

Đối với hình nhiều đường và đường viền của đa giác, bạn có thể chỉ định một góc xiên hoặc góc tròn JointType để thay thế kiểu mối nối góc nhọn cố định mặc định.

Mẫu sau đây áp dụng kiểu mối nối tròn cho một hình nhiều đường:

Kotlin

polyline?.jointType = JointType.ROUND

Java

polyline.setJointType(JointType.ROUND);

Loại khớp ảnh hưởng đến các đường cong bên trong đường thẳng. Nếu đường kẻ có mẫu nét vẽ bao gồm các dấu gạch ngang, thì loại khớp cũng sẽ áp dụng khi dấu gạch ngang nằm trên một khớp. Các loại khớp không ảnh hưởng đến dấu chấm vì chúng luôn có dạng hình tròn.

Đầu dòng

Bạn có thể chỉ định kiểu Cap cho mỗi đầu của một hình nhiều đường. Các tuỳ chọn là butt (mặc định), square, round hoặc bitmap tuỳ chỉnh. Đặt kiểu trong PolylineOptions.startCap và PolylineOptions.endCap, hoặc sử dụng các phương thức getter và setter thích hợp.

Đoạn mã sau đây chỉ định một hình mũ tròn ở đầu một đường nhiều đoạn.

Kotlin

polyline?.startCap = RoundCap()

Java

polyline.setStartCap(new RoundCap());

Đoạn mã sau đây chỉ định một bitmap tuỳ chỉnh cho nắp cuối:

Kotlin

polyline?.endCap = CustomCap(BitmapDescriptorFactory.fromResource(R.drawable.arrow), 16F)

Java

polyline.setEndCap(
    new CustomCap(BitmapDescriptorFactory.fromResource(R.drawable.arrow), 16));

Khi sử dụng bitmap tuỳ chỉnh, bạn nên chỉ định chiều rộng nét vẽ tham chiếu bằng pixel. API sẽ điều chỉnh tỷ lệ bitmap cho phù hợp. Độ rộng nét vẽ tham chiếu là độ rộng nét vẽ mà bạn đã dùng khi thiết kế hình ảnh bitmap cho nắp, ở kích thước ban đầu của hình ảnh. Chiều rộng nét vẽ tham chiếu mặc định là 10 pixel. Mẹo: Để xác định chiều rộng nét vẽ tham chiếu, hãy mở ảnh bitmap ở mức thu phóng 100% trong trình chỉnh sửa hình ảnh và vẽ chiều rộng mong muốn của nét vẽ tương ứng với hình ảnh.

Nếu bạn sử dụng BitmapDescriptorFactory.fromResource() để tạo bitmap, hãy đảm bảo rằng bạn sử dụng tài nguyên không phụ thuộc vào mật độ (nodpi).

Đoạn trắc địa

Chế độ cài đặt trắc địa chỉ áp dụng cho hình nhiều đường và đa giác. Thuộc tính này không áp dụng cho hình tròn vì hình tròn không được xác định là một tập hợp các đoạn.

Chế độ cài đặt trắc địa xác định cách vẽ các đoạn thẳng giữa các đỉnh liên tiếp của hình nhiều đường/đa giác. Đoạn đường trắc địa là những đoạn đường đi theo đường ngắn nhất dọc theo bề mặt Trái Đất (một hình cầu) và thường xuất hiện dưới dạng đường cong trên bản đồ có phép chiếu Mercator. Các đoạn không phải đường trắc địa được vẽ dưới dạng đường thẳng trên bản đồ.

Đặt thuộc tính này trên đối tượng tuỳ chọn của hình dạng bằng cách gọi *Options.geodesic(), trong đó true cho biết các đoạn phải được vẽ dưới dạng đường trắc địa và false cho biết các đoạn phải được vẽ dưới dạng đường thẳng. Nếu bạn không chỉ định, thì giá trị mặc định là các đoạn không trắc địa (false).

Sau khi bạn thêm hình dạng vào bản đồ, bạn có thể truy cập vào chế độ cài đặt đường trắc địa bằng cách gọi isGeodesic() và có thể thay đổi chế độ này bằng cách gọi setGeodesic().

Chỉ mục Z

z-index chỉ định thứ tự ngăn xếp của hình dạng này, so với các lớp phủ khác (các hình dạng khác, lớp phủ mặt đất và lớp phủ ô) trên bản đồ. Một lớp phủ có chỉ mục z cao sẽ được vẽ phía trên các lớp phủ có chỉ mục z thấp hơn. Hai lớp phủ có cùng chỉ mục z được vẽ theo thứ tự tuỳ ý.

Xin lưu ý rằng các điểm đánh dấu luôn được vẽ phía trên các lớp phủ khác, bất kể chỉ mục z của các lớp phủ khác.

Đặt thuộc tính này trên đối tượng tuỳ chọn của hình dạng bằng cách gọi *Options.zIndex(). Nếu không được chỉ định, chỉ mục z mặc định là 0. Sau khi thêm hình dạng vào bản đồ, bạn có thể truy cập vào chỉ mục z bằng cách gọi getZIndex() và có thể thay đổi chỉ mục z bằng cách gọi setZIndex().

Chế độ hiển thị

Chế độ hiển thị chỉ định liệu hình dạng có được vẽ trên bản đồ hay không, trong đó true cho biết hình dạng sẽ được vẽ và false cho biết hình dạng sẽ không được vẽ. Thuộc tính này cho phép bạn tạm thời không hiển thị một hình dạng trên bản đồ. Để xoá vĩnh viễn hình dạng khỏi bản đồ, hãy gọi remove() trên hình dạng đó.

Đặt thuộc tính này trên đối tượng tuỳ chọn của hình dạng bằng cách gọi *Options.visible(). Nếu không được chỉ định, chế độ hiển thị mặc định là true. Sau khi hình dạng được thêm vào bản đồ, bạn có thể truy cập vào chế độ hiển thị bằng cách gọi isVisible() và có thể thay đổi chế độ hiển thị bằng cách gọi setVisible().

Liên kết dữ liệu với một hình dạng

Bạn có thể lưu trữ một đối tượng dữ liệu tuỳ ý bằng một hình nhiều đường, đa giác hoặc hình tròn bằng cách sử dụng phương thức setTag() của hình dạng và truy xuất đối tượng bằng getTag(). Ví dụ: gọi Polyline.setTag() để lưu trữ một đối tượng dữ liệu có hình nhiều đường và gọi Polyline.getTag() để truy xuất đối tượng dữ liệu.

Mã bên dưới xác định một thẻ tuỳ ý (A) cho hình nhiều đường được chỉ định:

Kotlin

val polyline = map.addPolyline(
    PolylineOptions()
        .clickable(true)
        .add(
            LatLng(-35.016, 143.321),
            LatLng(-34.747, 145.592),
            LatLng(-34.364, 147.891),
            LatLng(-33.501, 150.217),
            LatLng(-32.306, 149.248),
            LatLng(-32.491, 147.309)
        )
)
polyline?.tag = "A"

Java

Polyline polyline = map.addPolyline((new PolylineOptions())
    .clickable(true)
    .add(new LatLng(-35.016, 143.321),
        new LatLng(-34.747, 145.592),
        new LatLng(-34.364, 147.891),
        new LatLng(-33.501, 150.217),
        new LatLng(-32.306, 149.248),
        new LatLng(-32.491, 147.309)));

polyline.setTag("A");

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

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