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

จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
เลือกแพลตฟอร์ม: Android iOS JavaScript

หน้าต่างข้อมูลเหนือเครื่องหมาย

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

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

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

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

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

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

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

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;

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

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

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

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

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

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

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

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

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

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

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