ยูทิลิตีหลายชั้นของ Google แผนที่

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

1. บทนำ
2. การเพิ่มเลเยอร์ของคลัสเตอร์, KML และ GeoJSON หลายรายการ
3. การเพิ่มฟีเจอร์ของคุณเอง
4. กิจกรรมการจัดการการคลิก
5. ดูแอปเดโม

บทนำ

ในบทแนะนําก่อนหน้านี้ คุณได้ศึกษาวิธีเพิ่มฟีเจอร์จาก KML และ GeoJSON ลงในแผนที่ รวมถึงกลุ่มของเครื่องหมายต่างๆ แต่หากคุณต้องการเพิ่มเลเยอร์เหล่านี้ลงในแผนที่เดียวกันและรับเหตุการณ์การคลิกที่เป็นอิสระสําหรับแต่ละเลเยอร์

การเพิ่มหลายคลัสเตอร์, KML และเลเยอร์ GeoJSON

ไลบรารีมีManagerออบเจ็กต์ที่ช่วยจัดการเหตุการณ์การคลิกสําหรับเลเยอร์หลายประเภท ดังนั้นก่อนที่จะตั้งค่าเลเยอร์ คุณต้องสร้างอินสแตนซ์และส่งผ่านใน GoogleMap ของคุณก่อน

Java

MarkerManager markerManager = new MarkerManager(map);
GroundOverlayManager groundOverlayManager = new GroundOverlayManager(map);
PolygonManager polygonManager = new PolygonManager(map);
PolylineManager polylineManager = new PolylineManager(map);

      

Kotlin

val markerManager = MarkerManager(map)
val groundOverlayManager = GroundOverlayManager(map!!)
val polygonManager = PolygonManager(map)
val polylineManager = PolylineManager(map)

      

ถัดไป คุณสามารถส่งต่อชั้นเรียนของผู้จัดการเหล่านี้ไปยังเครื่องมือสร้างของเลเยอร์อื่นๆ เมื่อตั้งค่า

Java

ClusterManager<MyItem> clusterManager = new ClusterManager<>(context, map, markerManager);
GeoJsonLayer geoJsonLineLayer = new GeoJsonLayer(map, R.raw.geojson_file, context, markerManager, polygonManager, polylineManager, groundOverlayManager);
KmlLayer kmlPolylineLayer = new KmlLayer(map, R.raw.kml_file, context, markerManager, polygonManager, polylineManager, groundOverlayManager, null);

      

Kotlin

val clusterManager =
    ClusterManager<MyItem>(context, map, markerManager)
val geoJsonLineLayer = GeoJsonLayer(
    map,
    R.raw.geojson_file,
    context,
    markerManager,
    polygonManager,
    polylineManager,
    groundOverlayManager
)
val kmlPolylineLayer = KmlLayer(
    map,
    R.raw.kml_file,
    context,
    markerManager,
    polygonManager,
    polylineManager,
    groundOverlayManager,
    null
)

      

การเพิ่มฟีเจอร์ของคุณเอง

หากต้องการเพิ่มเครื่องหมายของคุณเอง การวางซ้อนภาคพื้นดิน เส้นประกอบ หรือรูปหลายเหลี่ยมกับเลเยอร์เหล่านี้ ให้สร้าง Collection ของคุณเองแล้วใช้ Managers เพื่อเพิ่มสถานที่แทนการเพิ่มสถานที่ลงในออบเจ็กต์ GoogleMap โดยตรง เช่น หากต้องการเพิ่มเครื่องหมายใหม่ ให้ทําดังนี้

Java

MarkerManager.Collection markerCollection = markerManager.newCollection();
markerCollection.addMarker(new MarkerOptions()
    .position(new LatLng(51.150000, -0.150032))
    .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE))
    .title("Unclustered marker"));

      

Kotlin

val markerCollection =
    markerManager.newCollection()
markerCollection.addMarker(
    MarkerOptions()
        .position(LatLng(51.150000, -0.150032))
        .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE))
        .title("Unclustered marker")
)

      

การจัดการเหตุการณ์การคลิก

สําหรับคลัสเตอร์ KML และ GeoJSON Listener การคลิกจะทํางานตามปกติ ตราบใดที่คุณยังคงผ่านคลาส Manager ในเครื่องมือสร้างของเลเยอร์ที่คุณกําลังตั้งค่า วิธีตั้งค่า Listener การคลิกสําหรับเลเยอร์ KML มีดังนี้

Java

kmlPolylineLayer.addLayerToMap();
kmlPolylineLayer.setOnFeatureClickListener(feature -> Toast.makeText(context,
    "KML polyline clicked: " + feature.getProperty("name"),
    Toast.LENGTH_SHORT).show());

      

Kotlin

kmlPolylineLayer.addLayerToMap()
kmlPolylineLayer.setOnFeatureClickListener { feature: Feature ->
    Toast.makeText(context,
        "KML polyline clicked: ${feature.getProperty("name")}",
        Toast.LENGTH_SHORT
    ).show()
}

      

เมื่อเพิ่มตัวทําเครื่องหมาย การวางซ้อนพื้น เส้นประกอบ หรือรูปหลายเหลี่ยมของคุณเอง อย่าลืมเพิ่ม Listener การคลิกลงในออบเจ็กต์ Collection เหล่านั้น ตัวอย่างวิธีตั้งค่า Listener การคลิกที่เครื่องหมายใน markerCollection มีดังนี้

Java

markerCollection.setOnMarkerClickListener(marker -> { Toast.makeText(context,
    "Marker clicked: " + marker.getTitle(),
        Toast.LENGTH_SHORT).show();
    return false;
});

      

Kotlin

markerCollection.setOnMarkerClickListener { marker: Marker ->
    Toast.makeText(
        context,
        "Marker clicked: ${marker.title}",
        Toast.LENGTH_SHORT
    ).show()
    false
}

      

ดูแอปเดโม

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