หน้าต่างข้อมูลช่วยให้คุณแสดงข้อมูลแก่ผู้ใช้เมื่อผู้ใช้แตะเครื่องหมาย
หน้าต่างข้อมูลจะวาดโดยมีทิศทางตามหน้าจอของอุปกรณ์ โดยให้อยู่ตรงกลางเหนือเครื่องหมายที่เกี่ยวข้อง หน้าต่างข้อมูลเริ่มต้นมีชื่อเป็นตัวหนา โดยมีข้อความตัวอย่างอยู่ใต้ชื่อ
เนื้อหาของหน้าต่างข้อมูลกำหนดโดยพร็อพเพอร์ตี้ title
และ snippet
ของเครื่องหมาย การคลิกที่เครื่องหมายไม่แสดงหน้าต่างข้อมูล หากทั้งพร็อพเพอร์ตี้ title
และ snippet
ว่างเปล่าหรือ nil
แสดงหน้าต่างข้อมูลทีละหน้าต่างเท่านั้น หากผู้ใช้แตะเครื่องหมายอื่น หน้าต่างปัจจุบันจะซ่อนอยู่และหน้าต่างข้อมูลใหม่จะเปิดขึ้น หากผู้ใช้คลิกเครื่องหมายที่แสดงหน้าต่างข้อมูลอยู่ในปัจจุบัน หน้าต่างข้อมูลนั้นจะปิดและเปิดใหม่
สร้างหน้าต่างข้อมูลที่กำหนดเองเพื่อเพิ่มข้อความหรือรูปภาพ หน้าต่างข้อมูลที่กำหนดเองช่วยให้คุณควบคุมลักษณะที่ปรากฏของป๊อปอัปได้โดยสมบูรณ์
เพิ่มหน้าต่างข้อมูล
ข้อมูลโค้ดต่อไปนี้จะสร้างเครื่องหมายแบบง่าย โดยมีเฉพาะชื่อข้อความของหน้าต่างข้อมูล
Swift
let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127) let london = GMSMarker(position: position) london.title = "London" london.map = mapView
Objective-C
CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127); GMSMarker *london = [GMSMarker markerWithPosition:position]; london.title = @"London"; london.map = mapView;
เมื่อใช้พร็อพเพอร์ตี้ snippet
คุณจะเพิ่มข้อความที่จะแสดงใต้ชื่อด้วยแบบอักษรที่เล็กลงได้ สตริงที่ยาวกว่าความกว้างของ
หน้าต่างข้อมูลจะถูกรวมทับหลายบรรทัดโดยอัตโนมัติ ข้อความที่ยาวมากๆ อาจถูกตัดทอน
Swift
london.title = "London" london.snippet = "Population: 8,174,100" london.map = mapView
Objective-C
london.title = @"London"; london.snippet = @"Population: 8,174,100"; london.map = mapView;
แสดง/ซ่อนหน้าต่างข้อมูล
หน้าต่างข้อมูลออกแบบมาเพื่อตอบสนองต่อเหตุการณ์การแตะของผู้ใช้บนเครื่องหมาย
คุณแสดงหรือซ่อนหน้าต่างข้อมูลแบบเป็นโปรแกรมได้โดยการตั้งค่าพร็อพเพอร์ตี้ selectedMarker
ของ GMSMapView
ดังนี้
- ตั้ง
selectedMarker
เป็นชื่อของเครื่องหมายเพื่อแสดง - ตั้งค่า
selectedMarker
เป็นnil
เพื่อซ่อน
Swift
london.title = "London" london.snippet = "Population: 8,174,100" london.map = mapView // Show marker mapView.selectedMarker = london // Hide marker mapView.selectedMarker = nil
Objective-C
london.title = @"London"; london.snippet = @"Population: 8,174,100"; london.map = mapView; // Show marker mapView.selectedMarker = london; // Hide marker mapView.selectedMarker = nil;
การตั้งค่าหน้าต่างข้อมูลให้รีเฟรชอัตโนมัติ
ตั้งค่า tracksInfoWindowChanges
ที่เครื่องหมายเป็น YES
หรือ true
หากคุณต้องการให้แสดงพร็อพเพอร์ตี้ใหม่หรือเนื้อหาของหน้าต่างข้อมูลทันทีเมื่อมีการเปลี่ยนแปลง แทนที่จะต้องรอให้หน้าต่างข้อมูลซ่อนแล้วแสดงอีกครั้ง ค่าเริ่มต้นคือ NO
หรือ false
Swift
london.tracksInfoWindowChanges = true
Objective-C
london.tracksInfoWindowChanges = YES;
ในการตัดสินใจว่าจะตั้งค่าพร็อพเพอร์ตี้ tracksInfoWindowChanges
เมื่อใด คุณควรให้น้ำหนักกับข้อควรพิจารณาด้านประสิทธิภาพกับข้อดีของการดึงหน้าต่างข้อมูลใหม่โดยอัตโนมัติ เช่น
- หากคุณมีชุดการเปลี่ยนแปลงที่ต้องการดำเนินการ คุณจะเปลี่ยนพร็อพเพอร์ตี้เป็น
YES
แล้วกลับไปที่NO
ได้ - เมื่อภาพเคลื่อนไหวทํางานหรือโหลดเนื้อหาไม่พร้อมกัน คุณควรตั้งค่าพร็อพเพอร์ตี้เป็น
YES
จนกว่าการดำเนินการจะเสร็จสิ้น
นอกจากนี้ โปรดดูหมายเหตุที่ควรพิจารณา เมื่อใช้คุณสมบัติ iconView
ของเครื่องหมาย
การเปลี่ยนตำแหน่งหน้าต่างข้อมูล
หน้าต่างข้อมูลจะวาดโดยมีทิศทางตามหน้าจอของอุปกรณ์ โดยให้อยู่ตรงกลางเหนือเครื่องหมายที่เกี่ยวข้อง คุณเปลี่ยนตำแหน่งของหน้าต่างข้อมูลให้สัมพันธ์กับเครื่องหมายได้โดยการตั้งค่าพร็อพเพอร์ตี้ infoWindowAnchor
พร็อพเพอร์ตี้นี้ยอมรับ CGPoint
ซึ่งเป็นออฟเซ็ต (x,y) ที่ทั้งช่วง x และ y ระหว่าง 0.0 ถึง 1.0 ค่าออฟเซ็ตเริ่มต้นคือ (0.5, 0.0) ซึ่งก็คือกึ่งกลางด้านบน การตั้งค่าออฟเซ็ต infoWindowAnchor
มีประโยชน์ในการจัดแนวหน้าต่างข้อมูลให้ตรงกับไอคอนที่กำหนดเอง
Swift
london.infoWindowAnchor = CGPoint(x: 0.5, y: 0.5) london.icon = UIImage(named: "house") london.map = mapView
Objective-C
london.infoWindowAnchor = CGPointMake(0.5, 0.5); london.icon = [UIImage imageNamed:@"house"]; london.map = mapView;
การจัดการเหตุการณ์ในหน้าต่างข้อมูล
คุณฟังเหตุการณ์เกี่ยวกับหน้าต่างข้อมูลต่อไปนี้ได้
mapView:markerInfoWindow:
— เรียกใช้เมื่อกำลังจะเลือกเครื่องหมาย คุณสามารถเลือกแสดงหน้าต่างข้อมูลที่กำหนดเองเป็นUIView
เพื่อใช้เป็นเครื่องหมายได้ โปรดดูหน้าต่างข้อมูลที่กำหนดเองด้านล่างสำหรับข้อมูลเพิ่มเติมmapView:markerInfoContents:
— เรียกใช้เมื่อmapView:markerInfoWindow
แสดงผล nilmapView:didCloseInfoWindowOfMarker:
— เรียกใช้เมื่อหน้าต่างข้อมูลของเครื่องหมายปิดอยู่mapView:didLongPressInfoWindowOfMarker:
— เรียกใช้หลังจากกดหน้าต่างข้อมูลของเครื่องหมายเป็นเวลานาน
คุณต้องใช้โปรโตคอล GMSMapViewDelegate
เพื่อฟังเหตุการณ์ ดูคำแนะนำเกี่ยวกับเหตุการณ์และลิสต์เมธอดใน GMSMapViewDelegate
GitHub มีตัวอย่างที่สาธิตวิธีจัดการเหตุการณ์หน้าต่างข้อมูล ดังนี้
หน้าต่างข้อมูลที่กำหนดเอง
ปรับแต่งเนื้อหาของหน้าต่างข้อมูลด้วยการสร้างคลาสย่อยของ UIView
ที่กำหนดเลย์เอาต์ของหน้าต่างข้อมูลที่กำหนดเอง ในคลาสย่อยนั้น
ให้กำหนดมุมมองได้ตามต้องการ ตัวอย่างเช่น คุณสามารถใช้อินสแตนซ์ UILabel
ที่กำหนดเองเพื่อแสดงชื่อและข้อความตัวอย่าง และมุมมองอื่นๆ เช่น อินสแตนซ์ UIImageView
เพื่อเพิ่มรูปภาพที่แสดงในหน้าต่างข้อมูล
ตรวจสอบว่า ViewController
ใช้โปรโตคอล GMSIndoorDisplayDelegate
และกำหนด Listener สำหรับเหตุการณ์ mapView:markerInfoWindow: ระบบจะเรียกใช้ Listener เหตุการณ์นี้เมื่อมีการเลือกตัวทำเครื่องหมายและช่วยให้คุณแสดงผลอินสแตนซ์ของคลาส UIView
ที่กำหนดเองเพื่อกำหนดหน้าต่างข้อมูลที่กำหนดเองซึ่งตัวทำเครื่องหมายใช้ได้อีกด้วย
รูปภาพด้านล่างแสดงหน้าต่างข้อมูลเริ่มต้น หน้าต่างข้อมูลที่มีเนื้อหาที่กำหนดเอง และหน้าต่างข้อมูลที่มีกรอบและพื้นหลังที่กำหนดเอง
ตัวอย่างโค้ดบน GitHub ที่มาพร้อมกับ Maps SDK สำหรับ iOS จะมีตัวอย่างหน้าต่างข้อมูลที่กำหนดเอง เช่น ดูคำจำกัดความของ MarkerInfoWindowViewController.m (Objective-C) หรือ MarkerInfoWindowViewController.swift (Swift)
ดูตัวอย่างโค้ดสำหรับข้อมูลเกี่ยวกับการดาวน์โหลดและเรียกใช้ตัวอย่างเหล่านี้