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

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

บทนำ

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

การเพิ่มเลเยอร์ KML และ GeoJSON หลายเลเยอร์

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

Kotlin



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

Java


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

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

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
)

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

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

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

Kotlin



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

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"));

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

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

Kotlin



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

Java


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

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

Kotlin



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

Java


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

ดูแอปเดโม

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