หน้าต่างข้อมูลช่วยให้คุณแสดงข้อมูลให้กับผู้ใช้ เมื่อมีคนแตะ สี
หน้าต่างข้อมูลวาดโดยหันหน้าไปทางหน้าจออุปกรณ์ตรงกลางด้านบน เครื่องหมายที่เกี่ยวข้อง หน้าต่างข้อมูลเริ่มต้นจะมีชื่อเป็นตัวหนา ด้วยข้อความตัวอย่างใต้ชื่อ
เนื้อหาของหน้าต่างข้อมูลกำหนดโดย 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
ที่กำหนดเองไปยัง
กำหนดหน้าต่างข้อมูลที่กำหนดเองซึ่งเครื่องหมายใช้
ภาพด้านล่างแสดงหน้าต่างข้อมูลเริ่มต้น ซึ่งเป็นหน้าต่างข้อมูลที่มี เนื้อหา รวมถึงหน้าต่างข้อมูลที่มีเฟรมและพื้นหลังที่กำหนดเอง
![การเปรียบเทียบหน้าต่างข้อมูล การเปรียบเทียบหน้าต่างข้อมูล](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/documentation/images/marker-infowindows.png?authuser=4&hl=th)
ตัวอย่างโค้ดใน GitHub ที่มีให้พร้อมกับ Maps SDK สำหรับ iOS รวมตัวอย่างของหน้าต่างข้อมูลที่กำหนดเอง เช่น ดูคำจำกัดความของ MarkerInfoWindowViewController.m (Objective-C) หรือ MarkerInfoWindowViewController.swift (Swift)
ดูตัวอย่างโค้ดสำหรับข้อมูลเกี่ยวกับการดาวน์โหลดและการเรียกใช้ ตัวอย่างเหล่านี้