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

เลือกแพลตฟอร์ม แอนดรอยด์ 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;

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

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

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

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

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

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