التعامل مع أحداث النقر

اختيار النظام الأساسي: Android iOS JavaScript

اجعل ميزات البيانات تستجيب لأحداث click، واستخدِمها ل تغيير مظهر إحدى الميزات استنادًا إلى تفاعل المستخدِم.

كتابة معالج حدث النقر

عند حدوث حدث نقرة على طبقة عناصر، تُرسِل حزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google" لنظام التشغيل Android عنصرًا من نوع FeatureClickEvent إلى معالِج الأحداث.

استخدِم الطريقة FeatureClickEvent.getFeatures() للحصول على قائمة الميزات المتأثرة بالنقرة.

التعامل مع أحداث طبقة العناصر

اتّبِع الخطوات التالية لمعالجة الأحداث في طبقة "مجموعات البيانات". في هذا المثال، يتم تطبيق لون تعبئة وحدود زرقاء على المضلّع الذي يمثّل العنصر المحدّد.

ملاحظة: في هذا المثال، تحتوي سمة globalid لمجموعة البيانات على معرّف فريد لكل مضلع. يمكنك بعد ذلك فحص globalid المضلع الذي تم النقر عليه لتطبيق التصميم الأزرق على هذا المضلع فقط.

عند استدعاء FeatureLayer.setFeatureStyle()، تضبط وظيفة "إنشاء الأنماط" نمط العناصر على جميع العناصر في مجموعة البيانات. لتعديل نمط مجموعة بيانات في معالِج الأحداث، يجب استدعاء FeatureLayer.setFeatureStyle() لضبط النمط المعدَّل على جميع عناصر مجموعة البيانات.

1. اتّبِع الخطوات الواردة في البدء لإنشاء رقم تعريف جديد للخريطة ونمط جديد للخريطة، إذا لم يسبق لك إجراء ذلك. احرص على تفعيل طبقة ميزات مجموعات البيانات.

2. تأكَّد من أنّ صفك ينفِّذ FeatureLayer.OnFeatureClickListener.

3. سجِّل معالِج حدث لأحداث النقر على العناصر من خلال استدعاء FeatureLayer.addOnFeatureClickListener().

   KotlinJava

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

   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. طبِّق لون تعبئة أزرق على العنصر المحدّد وأخضر على كل العناصر الأخرى. لا يمكن النقر إلا على الميزات المرئية.

   KotlinJava

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

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