จัดการกิจกรรมการคลิก

เลือกแพลตฟอร์ม: Android iOS JavaScript

ทำให้ฟีเจอร์ข้อมูลตอบสนองต่อเหตุการณ์ click และใช้ฟีเจอร์ดังกล่าวเพื่อเปลี่ยนรูปลักษณ์ของฟีเจอร์ตามการโต้ตอบของผู้ใช้

ภาพหน้าจอแสดงข้อมูลรูปหลายเหลี่ยมที่มีการจัดรูปแบบ

เขียนเครื่องจัดการเหตุการณ์การคลิก

เมื่อเกิดเหตุการณ์การคลิกในเลเยอร์ฟีเจอร์ Maps SDK สำหรับ Android จะส่งออบเจ็กต์ FeatureClickEvent ไปยังเครื่องจัดการเหตุการณ์

ใช้เมธอด FeatureClickEvent.getFeatures() เพื่อดูรายการฟีเจอร์ที่ได้รับผลกระทบจากการคลิก

จัดการเหตุการณ์ของเลเยอร์ฟีเจอร์

ทำตามขั้นตอนต่อไปนี้เพื่อจัดการเหตุการณ์ในเลเยอร์ชุดข้อมูล ในตัวอย่างนี้ คุณใช้การเติมและเส้นขอบสีน้ำเงินกับรูปหลายเหลี่ยมที่แสดงองค์ประกอบที่เลือก

เมื่อคุณเรียกใช้ FeatureLayer.setFeatureStyle() ฟังก์ชันเริ่มต้นจากรูปแบบจะตั้งค่ารูปแบบฟีเจอร์ในทุกฟีเจอร์ในชุดข้อมูล หากต้องการอัปเดตสไตล์ของชุดข้อมูลในตัวแฮนเดิลเหตุการณ์ คุณต้องเรียกใช้ FeatureLayer.setFeatureStyle() เพื่อตั้งค่าสไตล์ที่อัปเดตแล้วในฟีเจอร์ชุดข้อมูลทั้งหมด

  1. หากยังไม่ได้ดำเนินการ ให้ทำตามขั้นตอนในเริ่มต้นใช้งานเพื่อสร้างรหัสแผนที่และรูปแบบแผนที่ใหม่ อย่าลืมเปิดใช้เลเยอร์ฟีเจอร์ชุดข้อมูล

  2. ตรวจสอบว่าชั้นเรียนของคุณใช้ FeatureLayer.OnFeatureClickListener

  3. ลงทะเบียนตัวแฮนเดิลเหตุการณ์สําหรับเหตุการณ์การคลิกฟีเจอร์โดยเรียกใช้ 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. ใช้การเติมสีน้ำเงินกับสถานที่ที่เลือก และใช้สีเขียวกับสถานที่อื่นๆ ทั้งหมด เฉพาะฟีเจอร์ที่มองเห็นได้เท่านั้นที่จะคลิกได้

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