หน้าต่างข้อมูล

หน้าต่างข้อมูลช่วยให้คุณแสดงข้อมูลต่อผู้ใช้ได้เมื่อผู้ใช้แตะเครื่องหมาย

ระบบจะวาดหน้าต่างข้อมูลโดยวางแนวตามหน้าจอของอุปกรณ์ โดยวางไว้ตรงกลางเหนือเครื่องหมายที่เกี่ยวข้อง หน้าต่างข้อมูลเริ่มต้นจะมีชื่อเป็นตัวหนา โดยมีข้อความตัวอย่างอยู่ด้านล่างชื่อ

เนื้อหาของหน้าต่างข้อมูลจะกำหนดโดยพร็อพเพอร์ตี้ title และ snippet ของเครื่องหมาย การคลิกเครื่องหมายจะไม่แสดงหน้าต่างข้อมูลหากพร็อพเพอร์ตี้ title และ snippet ว่างเปล่าหรือเป็น nil

หน้าต่างข้อมูลจะแสดงเพียงครั้งละ 1 รายการ หากผู้ใช้แตะเครื่องหมายอื่น หน้าต่างปัจจุบันจะซ่อนอยู่และหน้าต่างข้อมูลใหม่จะเปิดขึ้น หากผู้ใช้คลิกเครื่องหมายที่แสดงหน้าต่างข้อมูลอยู่ หน้าต่างข้อมูลดังกล่าวจะปิดและเปิดขึ้นอีกครั้ง

สร้างกรอบข้อมูลที่กำหนดเองเพื่อเพิ่มข้อความหรือรูปภาพ หน้าต่างข้อมูลแบบกำหนดเองช่วยให้คุณควบคุมลักษณะที่ปรากฏของป๊อปอัปได้อย่างสมบูรณ์

เพิ่มกรอบข้อมูล

ข้อมูลโค้ดต่อไปนี้จะสร้างเครื่องหมายง่ายๆ ที่มีเพียงชื่อสำหรับข้อความของหน้าต่างข้อมูล

let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let london = GMSMarker(position: position)
london.title = "London"
london.map = mapView
      

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.title = @"London";
london.map = mapView;
      

พร็อพเพอร์ตี้ snippet ช่วยให้คุณเพิ่มข้อความเพิ่มเติมที่จะปรากฏใต้ชื่อด้วยแบบอักษรขนาดเล็ก ระบบจะตัดสตริงที่ยาวกว่าความกว้างของหน้าต่างข้อมูลไปไว้ในหลายบรรทัดโดยอัตโนมัติ ระบบอาจตัดข้อความที่ยาวมาก

london.title = "London"
london.snippet = "Population: 8,174,100"
london.map = mapView
      

london.title = @"London";
london.snippet = @"Population: 8,174,100";
london.map = mapView;
      

แสดง/ซ่อนหน้าต่างข้อมูล

หน้าต่างข้อมูลออกแบบมาเพื่อตอบสนองต่อเหตุการณ์การสัมผัสของผู้ใช้บนเครื่องหมาย คุณสามารถแสดงหรือซ่อนหน้าต่างข้อมูลแบบเป็นโปรแกรมได้โดยการตั้งค่าselectedMarker พร็อพเพอร์ตี้ของ GMSMapView ดังนี้

• ตั้งค่า selectedMarker เป็นชื่อเครื่องหมายเพื่อแสดง
• ตั้งค่า selectedMarker เป็น nil เพื่อซ่อน

london.title = "London"
london.snippet = "Population: 8,174,100"
london.map = mapView
// Show marker
mapView.selectedMarker = london
// Hide marker
mapView.selectedMarker = nil
      

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

london.tracksInfoWindowChanges = true
      

london.tracksInfoWindowChanges = YES;
      

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

• หากต้องการเปลี่ยนแปลงหลายรายการ ให้เปลี่ยนพร็อพเพอร์ตี้เป็น YES แล้วเปลี่ยนกลับไปเป็น NO
• เมื่อภาพเคลื่อนไหวทำงานอยู่หรือเนื้อหากำลังโหลดแบบไม่พร้อมกัน คุณควรตั้งค่าพร็อพเพอร์ตี้เป็น YES ไว้จนกว่าการดำเนินการจะเสร็จสมบูรณ์

โปรดดูหมายเหตุสำหรับการพิจารณาเมื่อใช้พร็อพเพอร์ตี้ iconView ของเครื่องหมาย

การเปลี่ยนตำแหน่งของหน้าต่างข้อมูล

ระบบจะวาดหน้าต่างข้อมูลโดยวางแนวตามหน้าจอของอุปกรณ์ โดยวางไว้ตรงกลางเหนือเครื่องหมายที่เกี่ยวข้อง คุณเปลี่ยนตำแหน่งของหน้าต่างข้อมูลซึ่งสัมพันธ์กับเครื่องหมายได้โดยการตั้งค่าพร็อพเพอร์ตี้ infoWindowAnchor พร็อพเพอร์ตี้นี้รับ CGPoint ซึ่งกำหนดเป็นออฟเซ็ต (x,y) โดยที่ทั้ง x และ y อยู่ในช่วง 0.0 ถึง 1.0 ส่วนออฟเซตเริ่มต้นคือ (0.5, 0.0) ซึ่งก็คือตรงกลางด้านบน การตั้งค่าออฟเซต infoWindowAnchor มีประโยชน์ในการปรับแนวหน้าต่างข้อมูลให้สอดคล้องกับไอคอนที่กำหนดเอง

london.infoWindowAnchor = CGPoint(x: 0.5, y: 0.5)
london.icon = UIImage(named: "house")
london.map = mapView
      

london.infoWindowAnchor = CGPointMake(0.5, 0.5);
london.icon = [UIImage imageNamed:@"house"];
london.map = mapView;
      

การจัดการเหตุการณ์ในหน้าต่างข้อมูล

คุณสามารถฟังเหตุการณ์ของหน้าต่างข้อมูลต่อไปนี้

• mapView:markerInfoWindow: — เรียกใช้เมื่อกำลังจะเลือกเครื่องหมาย สามารถเลือกแสดงหน้าต่างข้อมูลที่กำหนดเองเป็น UIView เพื่อใช้กับเครื่องหมายได้ ดูข้อมูลเพิ่มเติมที่หน้าต่างข้อมูลที่กำหนดเองด้านล่าง

• mapView:markerInfoContents: — เรียกใช้เมื่อ mapView:markerInfoWindow แสดงผลเป็นค่าว่าง

• mapView:didCloseInfoWindowOfMarker: — เรียกใช้เมื่อปิดหน้าต่างข้อมูลของหมุด

• mapView:didLongPressInfoWindowOfMarker: — เรียกใช้หลังจากมีการกดหน้าต่างข้อมูลของหมุดค้างไว้

หากต้องการตรวจสอบเหตุการณ์ คุณต้องติดตั้งใช้งานโปรโตคอล GMSMapViewDelegate ดูคําแนะนําเกี่ยวกับเหตุการณ์และรายการเมธอดใน GMSMapViewDelegate

GitHub มีตัวอย่างที่แสดงวิธีจัดการเหตุการณ์ของหน้าต่างข้อมูล

• Objective-C
• Swift

หน้าต่างข้อมูลที่กำหนดเอง

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

ตรวจสอบว่า ViewController ใช้โปรโตคอล GMSIndoorDisplayDelegate และกำหนด Listener สำหรับเหตุการณ์ mapView:markerInfoWindow: ระบบจะเรียกใช้ Listener เหตุการณ์นี้เมื่อกำลังจะเลือกเครื่องหมาย และให้คุณแสดงอินสแตนซ์ของคลาส UIView ที่กําหนดเองเพื่อกําหนดหน้าต่างข้อมูลที่กำหนดเองซึ่งเครื่องหมายใช้

รูปภาพด้านล่างแสดงหน้าต่างข้อมูลเริ่มต้น หน้าต่างข้อมูลที่มีเนื้อหาที่กําหนดเอง และหน้าต่างข้อมูลที่มีกรอบและพื้นหลังที่กําหนดเอง

ตัวอย่างโค้ดใน GitHub ที่มาพร้อมกับ Maps SDK สำหรับ iOS มีตัวอย่างของหน้าต่างข้อมูลที่กำหนดเอง ตัวอย่างเช่น ดูคำจำกัดความของ MarkerInfoWindowViewController.m (Objective-C) หรือ MarkerInfoWindowViewController.swift (Swift)

ดูข้อมูลเกี่ยวกับการดาวน์โหลดและเรียกใช้ตัวอย่างเหล่านี้ได้ที่ตัวอย่างโค้ด