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

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

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

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

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

เนื้อหาของหน้าต่างข้อมูลจะกำหนดโดยพร็อพเพอร์ตี้ 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 แสดงผล nil

  • mapView: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)

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