Xử lý các sự kiện nhấp chuột

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

Làm cho các tính năng dữ liệu phản hồi với sự kiện click và sử dụng các tính năng này để thay đổi giao diện của một tính năng dựa trên lượt tương tác của người dùng.

Ảnh chụp màn hình cho thấy dữ liệu đa giác có kiểu.

Viết trình xử lý sự kiện nhấp chuột

Khi một sự kiện nhấp chuột xảy ra trên một lớp đối tượng, Maps SDK cho Android sẽ truyền một FeatureClickEvent đối tượng đến trình xử lý sự kiện.

Sử dụng phương thức FeatureClickEvent.getFeatures() để lấy danh sách các đối tượng bị ảnh hưởng bởi lượt nhấp.

Xử lý các sự kiện lớp đối tượng

Hãy làm theo các bước sau để xử lý các sự kiện trên lớp Tập dữ liệu. Trong ví dụ này, bạn sẽ áp dụng màu xanh dương cho phần tô và đường viền cho đa giác đại diện cho đối tượng đã chọn.

Khi bạn gọi FeatureLayer.setFeatureStyle(), hàm tạo kiểu sẽ đặt kiểu đối tượng cho tất cả các đối tượng trong tập dữ liệu. Để cập nhật kiểu của một tập dữ liệu trong trình xử lý sự kiện, bạn phải gọi FeatureLayer.setFeatureStyle() để đặt kiểu đã cập nhật cho tất cả các đối tượng trong tập dữ liệu.

  1. Nếu bạn chưa làm việc này, hãy làm theo các bước trong Bắt đầu để tạo mã bản đồ và kiểu bản đồ mới. Hãy nhớ bật lớp đối tượng Tập dữ liệu.

  2. Đảm bảo lớp của bạn triển khai FeatureLayer.OnFeatureClickListener.

  3. Đăng ký trình xử lý sự kiện cho các sự kiện nhấp vào đối tượng bằng cách gọi FeatureLayer.addOnFeatureClickListener().

    Kotlin

    private var datasetLayer: FeatureLayer? = null
// The globalid of the clicked dataset feature.
var lastGlobalId: String? = null
    
override fun onMapReady(googleMap: GoogleMap) {
  // Get the DATASET feature layer.
  datasetLayer = googleMap.getFeatureLayer(FeatureLayerOptions.Builder()
    .featureType(FeatureType.DATASET)
    // Specify the dataset ID.
    .datasetId(YOUR_DATASET_ID)
    .build())
    
  // Register the click event handler for the Datasets layer.
  datasetLayer?.addOnFeatureClickListener(this)
    
  // Apply default style to all features on load to enable clicking.
  styleDatasetsLayer()
}
    
// Define the click event handler to set lastGlobalId to globalid of selected feature.
override fun onFeatureClick(event: FeatureClickEvent) {
  // Get the dataset feature affected by the click.
  val clickFeatures: MutableList<Feature> = event.features
  lastGlobalId = null
  if (clickFeatures.get(0) is DatasetFeature) {
      lastGlobalId = ((clickFeatures.get(0) as DatasetFeature).getDatasetAttributes().get("globalid"))
      // Remember to reset the Style Factory.
      styleDatasetsLayer()
  }
}

    Java

    private FeatureLayer datasetLayer;
// The globalid of the clicked dataset feature.
String lastgobalid = null;
    
@Override
public void onMapReady(GoogleMap map) {
    
  // Get the DATASET feature layer.
  datasetLayer = map.getFeatureLayer(new FeatureLayerOptions.Builder()
    .featureType(FeatureType.DATASET)
    // Specify the dataset ID.
    .datasetId(YOUR_DATASET_ID)
    .build());
    
  // Register the click event handler for the Datasets layer.
  datasetLayer.addOnFeatureClickListener(this);
    
  // Apply default style to all features on load to enable clicking.
  styleDatasetsLayer();
}
    
@Override
// Define the click event handler.
public void onFeatureClick(FeatureClickEvent event) {
  // Get the dataset feature affected by the click.
  List<Feature> clickFeatures = event.getFeatures();
  lastgobalid = null;
  if (clickFeatures.get(0) instanceof DatasetFeature) {
      lastgobalid = ((DatasetFeature) clickFeatures.get(0)).getDatasetAttributes().get("globalid");
      // Remember to reset the Style Factory.
      styleDatasetsLayer();
  }
}

  4. Áp dụng màu nền xanh dương cho đối tượng đã chọn và màu xanh lục cho tất cả các đối tượng khác. Bạn chỉ có thể nhấp vào các đối tượng hiển thị.

    Kotlin

    // Set fill and border for all features.
private fun styleDatasetsLayer() {
    // Create the style factory function.
    val styleFactory = FeatureLayer.StyleFactory { feature: Feature ->
    
    // Check if the feature is an instance of DatasetFeature.
    if (feature is DatasetFeature) {
      val globalIDs: MutableMap<String, String> = feature.getDatasetAttributes()
      // Determine globalid attribute.
      val globalID = globalIDs!!["globalid"]
      // Set default colors to to green.
      var fillColor = 0x800000ff
      var strokeColor = 0xff0000ff
      if (globalID == lastGlobalId) {
        // Color selected area blue.
        fillColor = 0x8000ff00
        strokeColor = 0xff00ff00
      }
      return@StyleFactory FeatureStyle.Builder()
          .fillColor(fillColor)
          .strokeColor(strokeColor)
          .build()
    }
    return@StyleFactory null
  }
    
  // Apply the style factory function to the dataset feature layer.
  datasetLayer?.setFeatureStyle(styleFactory)
}

    Java

    // Set default green fill and border for all features.
private void styleDatasetsLayer() {
  // Create the style factory function.
  FeatureLayer.StyleFactory styleFactory = (Feature feature) -> {
    
  // Check if the feature is an instance of DatasetFeature.
  if (feature instanceof DatasetFeature) {
    
    // Check if "globalid" attribute of feature is the "globalid" of clicked feature.
    Map<String, String> globalIDs = ((DatasetFeature) feature).getDatasetAttributes();
    String globalID = globalIDs.get("globalid");
    // Set default colors to green.
    int fillColor = 0x4000ff00;
    int strokeColor = 0xff00ff00;
    if (Objects.equals(globalID, lastgobalid)) {
      // Color selected area blue.
      fillColor = 0x400000ff;
      strokeColor = 0xff0000ff;
    }
    return new FeatureStyle.Builder()
      .fillColor(fillColor)
      .strokeColor(strokeColor)
      .strokeWidth(2)
      .build();
    }
    return null;
  };
    
  // Apply the style factory function to the feature layer.
  datasetLayer.setFeatureStyle(styleFactory);
}