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

เลือกแพลตฟอร์ม 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 }