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

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

คุณสามารถสร้างเลเยอร์ฟีเจอร์ให้ตอบสนองต่อเหตุการณ์ click ของผู้ใช้เพื่อรับรหัสสถานที่และประเภทองค์ประกอบของขอบเขตที่ผู้ใช้คลิก แผนที่ตัวอย่างต่อไปนี้แสดงขอบเขตของเลเยอร์ประเทศ และแสดงตัวแฮนเดิลเหตุการณ์ที่กำหนดสไตล์รูปหลายเหลี่ยมที่คลิกซึ่งเชื่อมโยงกับประเทศที่เลือก

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

เมื่อเหตุการณ์การคลิกเกิดขึ้นในเลเยอร์ฟีเจอร์ Maps SDK สำหรับ Android จะส่งออบเจ็กต์ FeatureClickEvent ให้กับตัวแฮนเดิลเหตุการณ์ ใช้ FeatureClickEvent เพื่อดูพิกัดละติจูดและลองจิจูดของการคลิก รวมถึงรายการองค์ประกอบที่ได้รับผลกระทบจากการคลิก

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

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

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

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

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

3. ลงทะเบียนตัวแฮนเดิลเหตุการณ์สําหรับเหตุการณ์การคลิกฟีเจอร์โดยเรียกใช้ FeatureLayer.addOnFeatureClickListener()

   Java

   private FeatureLayer countryLayer;
   
   @Override
   public void onMapReady(GoogleMap map) {
   
     // Get the COUNTRY feature layer.
     countryLayer = map.getFeatureLayer(new FeatureLayerOptions.Builder()
       .featureType(FeatureType.COUNTRY)
       .build());
   
     // Register the click event handler for the Country layer.
     countryLayer.addOnFeatureClickListener(this);
   
     // Apply default style to all countries on load to enable clicking.
     styleCountryLayer();
   }
   
   // Set default fill and border for all countries to ensure that they respond
   // to click events.
   private void styleCountryLayer() {
     FeatureLayer.StyleFactory styleFactory = (Feature feature) -> {
       return new FeatureStyle.Builder()
         // Set the fill color for the country as white with a 10% opacity.
         .fillColor(Color.argb(0.1, 0, 0, 0))
         // Set border color to solid black.
         .strokeColor(Color.BLACK)
         .build();
     };
   
     // Apply the style factory function to the country feature layer.
     countryLayer.setFeatureStyle(styleFactory);
   }
   

   Kotlin

   private var countryLayer: FeatureLayer? = null
   
   override fun onMapReady(googleMap: GoogleMap) {
     // Get the COUNTRY feature layer.
     countryLayer = googleMap.getFeatureLayer(FeatureLayerOptions.Builder()
       .featureType(FeatureType.COUNTRY)
       .build())
   
     // Register the click event handler for the Country layer.
     countryLayer?.addOnFeatureClickListener(this)
   
     // Apply default style to all countries on load to enable clicking.
     styleCountryLayer()
   }
   
   // Set default fill and border for all countries to ensure that they respond
   // to click events.
   private fun styleCountryLayer() {
     val styleFactory = FeatureLayer.StyleFactory { feature: Feature ->
       return@StyleFactory FeatureStyle.Builder()
         // Set the fill color for the country as white with a 10% opacity.
         .fillColor(Color.argb(0.1f, 0f, 0f, 0f))
         // Set border color to solid black.
         .strokeColor(Color.BLACK)
         .build()
     }
   
     // Apply the style factory function to the country feature layer.
     countryLayer?.setFeatureStyle(styleFactory)
   }
   

4. ใช้สีแดงเป็นสีเติมสำหรับประเทศที่เลือก เฉพาะฟีเจอร์ที่มองเห็นได้เท่านั้นที่จะคลิกได้

   Java

   @Override
   // Define the click event handler.
   public void onFeatureClick(FeatureClickEvent event) {
   
     // Get the list of features affected by the click using
     // getPlaceIds() defined below.
     List<String> selectedPlaceIds = getPlaceIds(event.getFeatures());
   
     if (!selectedPlaceIds.isEmpty()) {
       FeatureLayer.StyleFactory styleFactory = (Feature feature) -> {
         // Use PlaceFeature to get the placeID of the country.
         if (feature instanceof PlaceFeature) {
           if (selectedPlaceIds.contains(((PlaceFeature) feature).getPlaceId())) {
             return new FeatureStyle.Builder()
                 // Set the fill color to red.
                 .fillColor(Color.RED)
                 .build();
           }
         }
         return null;
       };
   
       // Apply the style factory function to the feature layer.
       countryLayer.setFeatureStyle(styleFactory);
     }
   }
   
   // Get a List of place IDs from the FeatureClickEvent object.
   private List<String> getPlaceIds(List<Feature> features) {
     List<String> placeIds = new ArrayList<>();
     for (Feature feature : features) {
       if (feature instanceof PlaceFeature) {
           placeIds.add(((PlaceFeature) feature).getPlaceId());
       }
     }
     return placeIds;
   }
   

   Kotlin

   // Define the click event handler.
   override fun onFeatureClick(event: FeatureClickEvent) {
   
     // Get the list of features affected by the click using
     // getPlaceIds() defined below.
     val selectedPlaceIds = getPlaceIds(event.getFeatures())
     if (!selectedPlaceIds.isEmpty()) {
         val styleFactory = FeatureLayer.StyleFactory { feature: Feature ->
             // Use PlaceFeature to get the placeID of the country.
             if (feature is PlaceFeature) {
                 if (selectedPlaceIds.contains((feature as PlaceFeature).getPlaceId())) {
                     return@StyleFactory FeatureStyle.Builder()
                         // Set the fill color to red.
                         .fillColor(Color.RED)
                         .build()
                 }
             }
             return@StyleFactory null
         }
   
         // Apply the style factory function to the feature layer.
         countryLayer?.setFeatureStyle(styleFactory)
     }
   }
   
   // Get a List of place IDs from the FeatureClickEvent object.
   private fun getPlaceIds(features: List<Feature>): List<String> {
     val placeIds: MutableList<String> = ArrayList()
     for (feature in features) {
         if (feature is PlaceFeature) {
             placeIds.add((feature as PlaceFeature).getPlaceId())
         }
     }
     return placeIds
   }