เครื่องหมายจะระบุสถานที่แห่งเดียวบนแผนที่
โดยค่าเริ่มต้น เครื่องหมายจะใช้ไอคอนมาตรฐานที่มีรูปลักษณ์ทั่วไปของ Google แผนที่ ความรู้สึก ถ้าคุณต้องการปรับแต่งเครื่องหมาย คุณสามารถเปลี่ยนสีของเครื่องหมาย เครื่องหมายเริ่มต้น หรือแทนที่ภาพเครื่องหมายด้วยไอคอนที่กำหนดเอง หรือเปลี่ยนอื่นๆ ของตัวทำเครื่องหมาย
ในการตอบสนองต่อเหตุการณ์การคลิกบนเครื่องหมาย คุณจะสามารถเปิดข้อมูล หน้าต่างข้อมูลแสดงข้อความหรือรูปภาพในหน้าต่างกล่องโต้ตอบ เหนือเครื่องหมาย คุณสามารถใช้หน้าต่างข้อมูลเริ่มต้นเพื่อแสดงข้อความ หรือสร้าง หน้าต่างข้อมูลที่คุณกำหนดเองเพื่อควบคุมเนื้อหาของหน้าต่างนั้นอย่างสมบูรณ์
การเพิ่มเครื่องหมาย
หากต้องการเพิ่มเครื่องหมาย ให้สร้างวัตถุ 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
อีกวิธีหนึ่งคือ คุณสามารถนำการวางซ้อนทั้งหมด
(รวมถึงเครื่องหมาย) ขณะนี้อยู่บนแผนที่โดยโทรหา GMSMapView
clear
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
ของเครื่องหมาย
ข้อมูลโค้ดต่อไปนี้จะสร้างเครื่องหมายโดยมีไอคอนที่กำหนดเองระบุไว้
UIImage
ในพร็อพเพอร์ตี้ icon
ไอคอนนี้อยู่ตรงกลางที่ลอนดอน ประเทศอังกฤษ
snippet ถือว่าแอปพลิเคชันของคุณมีภาพชื่อ "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