เครื่องหมายจะระบุตําแหน่งบนแผนที่
โดยค่าเริ่มต้น เครื่องหมายจะใช้ไอคอนมาตรฐานที่มีรูปลักษณ์และความรู้สึกทั่วไปของ Google Maps หากต้องการปรับแต่งตัวทําเครื่องหมาย คุณสามารถเปลี่ยนสีของตัวทําเครื่องหมายเริ่มต้น หรือแทนที่รูปภาพตัวทําเครื่องหมายด้วยไอคอนที่กําหนดเอง หรือเปลี่ยนพร็อพเพอร์ตี้อื่นๆ ของตัวทําเครื่องหมายได้
เปิดหน้าต่างข้อมูลเพื่อตอบสนองต่อกิจกรรมการคลิกบนตัวทําเครื่องหมาย หน้าต่างข้อมูลจะแสดงข้อความหรือรูปภาพในหน้าต่างป๊อปอัปเหนือเครื่องหมาย คุณสามารถใช้หน้าต่างข้อมูลเริ่มต้นเพื่อแสดงข้อความ หรือสร้างหน้าต่างข้อมูลที่กําหนดเองเพื่อควบคุมเนื้อหาได้อย่างสมบูรณ์
เพิ่มเครื่องหมาย
หากต้องการเพิ่มเครื่องหมาย ให้สร้างออบเจ็กต์ GMSMarker
ที่มี position
และ title
และตั้งค่า map
ตัวอย่างต่อไปนี้สาธิตวิธีการเพิ่มตัวทําเครื่องหมายในออบเจ็กต์ GMSMapView
ที่มีอยู่ เครื่องหมายจะสร้างขึ้นที่พิกัด 10,10
และแสดงสตริง "สวัสดีโลก" ในหน้าต่างข้อมูลเมื่อคลิก
Swift
let position = CLLocationCoordinate2D(latitude: 10, longitude: 10) let marker = GMSMarker(position: position) marker.title = "Hello World" marker.map = mapView
Objective-C
CLLocationCoordinate2D position = CLLocationCoordinate2DMake(10, 10); GMSMarker *marker = [GMSMarker markerWithPosition:position]; marker.title = @"Hello World"; marker.map = mapView;
คุณทําให้การเพิ่มเครื่องหมายใหม่ลงในแผนที่เป็นภาพเคลื่อนไหวได้โดยตั้งค่าพร็อพเพอร์ตี้ marker.appearAnimation
เป็น
kGMSMarkerAnimationPop
เพื่อทําให้ตัวทําเครื่องหมายปรากฏขึ้นจากgroundAnchor
เมื่อเพิ่มkGMSMarkerAnimationFadeIn
เพื่อทําให้เครื่องหมายจางลงเมื่อเพิ่ม
การลบเครื่องหมาย
คุณนําเครื่องหมายออกจากแผนที่ได้โดยตั้งค่าพร็อพเพอร์ตี้ map
ของ GMSMarker
เป็น nil
อีกวิธีหนึ่งคือนําการวางซ้อนทั้งหมด (รวมถึงเครื่องหมาย) ออกจากแผนที่ในปัจจุบันโดยเรียกเมธอด clear
ของ GMSMapView
Swift
let camera = GMSCameraPosition.camera( withLatitude: -33.8683, longitude: 151.2086, zoom: 6 ) let mapView = GMSMapView.map(withFrame: .zero, camera: camera) // ... mapView.clear()
Objective-C
GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.8683 longitude:151.2086 zoom:6]; mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera]; // ... [mapView clear];
หากคุณต้องการแก้ไขตัวทําเครื่องหมายหลังจากเพิ่มลงในแผนที่แล้ว อย่าลืมเก็บออบเจ็กต์ GMSMarker
ไว้ค้างไว้ คุณแก้ไขเครื่องหมายในภายหลังได้โดยทําการเปลี่ยนแปลงกับออบเจ็กต์นี้
Swift
let position = CLLocationCoordinate2D(latitude: 10, longitude: 10) let marker = GMSMarker(position: position) marker.map = mapView // ... marker.map = nil
Objective-C
CLLocationCoordinate2D position = CLLocationCoordinate2DMake(10, 10); GMSMarker *marker = [GMSMarker markerWithPosition:position]; marker.map = mapView; // ... marker.map = nil;
การเปลี่ยนสีเครื่องหมาย
คุณปรับแต่งสีของรูปภาพเครื่องหมายเริ่มต้นได้โดยส่งคําขอเวอร์ชันสีอ่อนของไอคอนเริ่มต้นด้วย markerImageWithColor:
และส่งรูปภาพที่เป็นผลลัพธ์ไปยังพร็อพเพอร์ตี้ไอคอนของ GMSMarker
Swift
marker.icon = GMSMarker.markerImage(with: .black)
Objective-C
marker.icon = [GMSMarker markerImageWithColor:[UIColor blackColor]];
การปรับแต่งรูปภาพเครื่องหมาย
หากต้องการเปลี่ยนรูปภาพเครื่องหมายเริ่มต้น ให้ตั้งค่าไอคอนที่กําหนดเองโดยใช้พร็อพเพอร์ตี้ icon
หรือ iconView
ของเครื่องหมาย
หากตั้งค่า iconView
ไว้ API จะไม่สนใจพร็อพเพอร์ตี้ icon
การอัปเดต icon
ปัจจุบันจะไม่ได้รับการยอมรับตราบใดที่มีการตั้งค่า iconView
การใช้พร็อพเพอร์ตี้ `icon` ของเครื่องหมาย
ข้อมูลโค้ดต่อไปนี้จะสร้างเครื่องหมายที่มีไอคอนที่กําหนดเองเป็น UIImage
ในพร็อพเพอร์ตี้ icon
ไอคอนนี้มีจุดศูนย์กลางอยู่ที่ลอนดอน อังกฤษ ข้อมูลโค้ดจะถือว่าแอปพลิเคชันของคุณมีรูปภาพชื่อ "house.png"
Swift
let positionLondon = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127) let london = GMSMarker(position: positionLondon) london.title = "London" london.icon = UIImage(named: "house") london.map = mapView
Objective-C
CLLocationCoordinate2D positionLondon = CLLocationCoordinate2DMake(51.5, -0.127); GMSMarker *london = [GMSMarker markerWithPosition:positionLondon]; london.title = @"London"; london.icon = [UIImage imageNamed:@"house"]; london.map = mapView;
หากคุณต้องการสร้างเครื่องหมายหลายรายการที่มีรูปภาพเดียวกัน ให้ใช้อินสแตนซ์ UIImage
เดียวกันสําหรับเครื่องหมายแต่ละรายการ ซึ่งจะช่วยปรับปรุงประสิทธิภาพของแอปพลิเคชันเมื่อแสดงเครื่องหมายหลายรายการ
รูปภาพนี้อาจมีหลายเฟรม รวมถึงใช้พร็อพเพอร์ตี้ alignmentRectInsets
ด้วย ซึ่งมีประโยชน์หากเครื่องหมายมีเงาหรือภูมิภาคอื่นๆ ที่ใช้งานไม่ได้
การใช้พร็อพเพอร์ตี้ `iconView` ของเครื่องหมาย
ข้อมูลโค้ดต่อไปนี้จะสร้างเครื่องหมายด้วยไอคอนที่กําหนดเองโดยการตั้งค่าพร็อพเพอร์ตี้ iconView
ของเครื่องหมาย และทําให้สีของสีของเครื่องหมายเคลื่อนไหว
ข้อมูลโค้ดจะถือว่าแอปพลิเคชันของคุณมีรูปภาพชื่อ "house.png"
Swift
import CoreLocation import GoogleMaps class MarkerViewController: UIViewController, GMSMapViewDelegate { var mapView: GMSMapView! var london: GMSMarker? var londonView: UIImageView? override func viewDidLoad() { super.viewDidLoad() let camera = GMSCameraPosition.camera( withLatitude: 51.5, longitude: -0.127, zoom: 14 ) let mapView = GMSMapView.map(withFrame: .zero, camera: camera) view = mapView mapView.delegate = self let house = UIImage(named: "House")!.withRenderingMode(.alwaysTemplate) let markerView = UIImageView(image: house) markerView.tintColor = .red londonView = markerView let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127) let marker = GMSMarker(position: position) marker.title = "London" marker.iconView = markerView marker.tracksViewChanges = true marker.map = mapView london = marker } func mapView(_ mapView: GMSMapView, idleAt position: GMSCameraPosition) { UIView.animate(withDuration: 5.0, animations: { () -> Void in self.londonView?.tintColor = .blue }, completion: {(finished) in // Stop tracking view changes to allow CPU to idle. self.london?.tracksViewChanges = false }) } }
Objective-C
@import CoreLocation; @import GoogleMaps; @interface MarkerViewController : UIViewController <GMSMapViewDelegate> @property (strong, nonatomic) GMSMapView *mapView; @end @implementation MarkerViewController { GMSMarker *_london; UIImageView *_londonView; } - (void)viewDidLoad { [super viewDidLoad]; GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:51.5 longitude:-0.127 zoom:14]; _mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera]; self.view = _mapView; _mapView.delegate = self; UIImage *house = [UIImage imageNamed:@"House"]; house = [house imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate]; _londonView = [[UIImageView alloc] initWithImage:house]; _londonView.tintColor = [UIColor redColor]; CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127); _london = [GMSMarker markerWithPosition:position]; _london.title = @"London"; _london.iconView = _londonView; _london.tracksViewChanges = YES; _london.map = self.mapView; } - (void)mapView:(GMSMapView *)mapView idleAtCameraPosition:(GMSCameraPosition *)position { [UIView animateWithDuration:5.0 animations:^{ self->_londonView.tintColor = [UIColor blueColor]; } completion:^(BOOL finished) { // Stop tracking view changes to allow CPU to idle. self->_london.tracksViewChanges = NO; }]; } @end
เนื่องจาก iconView
ยอมรับ UIView
คุณจึงมีลําดับชั้นของการควบคุม UI มาตรฐานเพื่อกําหนดมาร์กอัป การดูแต่ละรายการจะมีชุดความสามารถของภาพเคลื่อนไหวมาตรฐาน คุณรวมการเปลี่ยนแปลงของขนาดเครื่องหมาย สี และอัลฟ่า รวมถึงการใช้การเปลี่ยนรูปแบบที่กําหนดเองได้ พร็อพเพอร์ตี้ iconView
รองรับภาพเคลื่อนไหวของพร็อพเพอร์ตี้ทั้งหมดที่เคลื่อนไหวได้ของ UIView
ยกเว้น frame
และ center
โปรดคํานึงถึงข้อควรพิจารณาต่อไปนี้เมื่อใช้ iconView
UIView
อาจขอใช้ทรัพยากรได้เมื่อตั้งtracksViewChanges
เป็นYES
ซึ่งอาจส่งผลให้การใช้งานแบตเตอรี่เพิ่มขึ้น เมื่อเปรียบเทียบกัน เฟรมเดียวUIImage
จะเป็นแบบคงที่และไม่จําเป็นต้องแสดงผลอีกครั้ง- อุปกรณ์บางเครื่องอาจประสบปัญหาในการแสดงผลแผนที่หากคุณมีเครื่องหมายจํานวนมากบนหน้าจอ และเครื่องหมายแต่ละรายการมี
UIView
ของตัวเอง และเครื่องหมายทั้งหมดติดตามการเปลี่ยนแปลงในเวลาเดียวกัน iconView
ไม่ตอบสนองกับการโต้ตอบของผู้ใช้ เพราะเป็นภาพรวมของข้อมูลพร็อพเพอร์ตี้- ข้อมูลพร็อพเพอร์ตี้จะทํางานเสมือนว่า
clipsToBounds
ตั้งค่าเป็นYES
โดยไม่คํานึงถึงค่าจริง คุณใช้การเปลี่ยนรูปแบบที่ทํางานนอกขอบเขตได้ แต่ออบเจ็กต์ที่คุณวาดต้องอยู่ภายในขอบเขตของออบเจ็กต์ ระบบจะตรวจสอบและนําการเปลี่ยนแปลง/การเปลี่ยนแปลงทั้งหมดไปใช้ กล่าวโดยสรุปคือ การดูย่อยต้องอยู่ภายในมุมมองนั้น
หากต้องการตัดสินใจว่าจะตั้งค่าพร็อพเพอร์ตี้ tracksViewChanges
เมื่อใด คุณควรประเมินน้ําหนักของประสิทธิภาพเทียบกับข้อดีของการใช้ตัวทําเครื่องหมายใหม่โดยอัตโนมัติ เช่น
- หากคุณมีชุดการเปลี่ยนแปลงที่ต้องทํา คุณสามารถเปลี่ยนพร็อพเพอร์ตี้เป็น
YES
แล้วกลับไปยังNO
ได้ - เมื่อภาพเคลื่อนไหวทํางานอยู่หรือโหลดเนื้อหาแบบไม่พร้อมกัน
คุณควรตั้งค่าพร็อพเพอร์ตี้เป็น
YES
จนกว่าการดําเนินการจะเสร็จสมบูรณ์
การเปลี่ยนความทึบแสงของตัวทําเครื่องหมาย
คุณควบคุมความทึบแสงของตัวทําเครื่องหมายด้วยพร็อพเพอร์ตี้ opacity
ได้ คุณควรระบุความทึบแสงเป็นแบบลอยระหว่าง 0.0 ถึง 1.0 โดยที่ 0 คือโปร่งใสทั้งหมด
และ 1 คือทึบแสงทั้งหมด
Swift
marker.opacity = 0.6
Objective-C
marker.opacity = 0.6;
คุณเคลื่อนไหวความทึบแสงของตัวทําเครื่องหมายด้วยภาพเคลื่อนไหวหลักผ่าน GMSMarkerLayer
ได้
แยกเครื่องหมาย
โดยปกติไอคอนเครื่องหมายจะวาดโดยสัมพันธ์กับหน้าจอของอุปกรณ์ ไม่ใช่พื้นผิวแผนที่ ดังนั้นการหมุน เอียง หรือซูมแผนที่ไม่จําเป็นต้องเปลี่ยนการวางแนวของเครื่องหมาย
คุณสามารถตั้งค่าทิศทางของเครื่องหมายให้แบนกับโลก เครื่องหมายคงที่จะหมุนเมื่อมีการหมุนแผนที่ และเปลี่ยนมุมมองเมื่อแผนที่เอียง เช่นเดียวกับเครื่องหมายปกติ เครื่องหมายแสดงการแบนจะคงขนาดไว้เมื่อแผนที่ถูกซูมเข้าหรือออก
หากต้องการเปลี่ยนการวางแนวของตัวทําเครื่องหมาย ให้ตั้งค่าพร็อพเพอร์ตี้ flat
ของตัวทําเครื่องหมายเป็น YES
หรือ true
Swift
let positionLondon = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127) let londonMarker = GMSMarker(position: positionLondon) londonMarker.isFlat = true londonMarker.map = mapView
Objective-C
CLLocationCoordinate2D positionLondon = CLLocationCoordinate2DMake(51.5, -0.127); GMSMarker *londonMarker = [GMSMarker markerWithPosition:positionLondon]; londonMarker.flat = YES; londonMarker.map = mapView;
การหมุนเครื่องหมาย
คุณหมุนเครื่องหมายรอบๆ จุดยึดได้โดยการตั้งค่าพร็อพเพอร์ตี้ rotation
ระบุการหมุนเวียนเป็นประเภท CLLocationDegrees
ซึ่งวัดตามเข็มนาฬิกาจากตําแหน่งเริ่มต้น เมื่อเครื่องหมายคงที่บนแผนที่
ตําแหน่งเริ่มต้นจะเป็นทิศเหนือ
ตัวอย่างต่อไปนี้จะหมุนเครื่องหมาย 90° การตั้งค่าพร็อพเพอร์ตี้ groundAnchor
เป็น 0.5,0.5
จะทําให้เครื่องหมายหมุนอยู่รอบๆ ศูนย์กลาง ไม่ใช่ฐาน
Swift
let degrees = 90.0 londonMarker.groundAnchor = CGPoint(x: 0.5, y: 0.5) londonMarker.rotation = degrees londonMarker.map = mapView
Objective-C
CLLocationDegrees degrees = 90; londonMarker.groundAnchor = CGPointMake(0.5, 0.5); londonMarker.rotation = degrees; londonMarker.map = mapView;
การจัดการเหตุการณ์บนเครื่องหมาย
ฟังเหตุการณ์ที่เกิดขึ้นบนแผนที่ได้ เช่น เมื่อผู้ใช้แตะที่เครื่องหมาย หากต้องการฟังเหตุการณ์ คุณต้องใช้โปรโตคอล GMSMapViewDelegate
ดูคําแนะนําเกี่ยวกับเหตุการณ์และรายการเมธอดใน GMSMapViewDelegate
สําหรับกิจกรรม Street View ให้ไปที่ GMSPanoramaViewDelegate