ניהול אירועי קליקים

בחירת פלטפורמה: Android iOS JavaScript

אפשר להגדיר שכאשר משתמשים לוחצים על גבול מסוים, שכבת התכונות תגיב לאירועי click של המשתמשים ותקבל את מזהה המקום ואת סוג התכונה של הגבול. במפה הבאה מוצגים הגבולות של שכבת המדינה, ומוצג גם handler של אירוע שמעצב את הפוליגון של המדינה שנבחרה.

כתיבת גורם מטפל באירועי קליק

כשמתרחש אירוע קליק בשכבת תכונות, Maps SDK for Android מעביר אובייקט FeatureClickEvent למטפל באירוע. אפשר להשתמש בלחצן FeatureClickEvent כדי לקבל את הקואורדינטות של קו הרוחב וקו האורך של הנקודה שלחצתם עליה, ורשימה של תכונות שהושפעו מהלחיצה.

טיפול באירועים של שכבת תכונות

כדי לטפל באירועים בשכבת תכונות, פועלים לפי השלבים הבאים. בדוגמה הזו, מוגדר click event handler לשכבת התכונות Country כדי להחיל מילוי אדום על המצולע שמייצג את המדינה שנבחרה.

כשקוראים לפונקציה FeatureLayer.setFeatureStyle(), הפונקציה ליצירת סגנון מגדירה את הסגנון בכל התכונות בשכבת התכונות. כדי לעדכן את הסגנון של תכונה ב-event handler, צריך לקרוא ל-FeatureLayer.setFeatureStyle() כדי להגדיר את הסגנון המעודכן בכל התכונות.

  1. אם עדיין לא עשיתם זאת, פועלים לפי השלבים במאמר תחילת העבודה כדי ליצור מזהה מפה וסגנון מפה חדשים. חשוב להפעיל את שכבת התכונות Country.

  2. מוודאים שהכיתה מטמיעה את FeatureLayer.OnFeatureClickListener.

  3. כדי לרשום handler של אירועים לאירועי קליקים על תכונות, מתקשרים אל 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
}