เครื่องหมาย

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

เครื่องหมายระบุตำแหน่งเดียวบนแผนที่

โดยค่าเริ่มต้น เครื่องหมายจะใช้ไอคอนมาตรฐานที่มีลักษณะและรูปแบบการใช้งานทั่วไปของ Google Maps หากต้องการปรับแต่งเครื่องหมาย คุณสามารถเปลี่ยนสีของเครื่องหมายเริ่มต้น หรือแทนที่รูปภาพเครื่องหมายด้วยไอคอนที่กำหนดเอง หรือเปลี่ยนพร็อพเพอร์ตี้อื่นๆ ของเครื่องหมาย

คุณสามารถเปิดหน้าต่าง ข้อมูลได้เมื่อมีการคลิกเครื่องหมาย หน้าต่างข้อมูลจะแสดงข้อความหรือรูปภาพในหน้าต่างกล่องโต้ตอบเหนือเครื่องหมาย คุณสามารถใช้หน้าต่างข้อมูลเริ่มต้นเพื่อแสดงข้อความ หรือสร้างหน้าต่างข้อมูลที่กำหนดเองเพื่อควบคุมเนื้อหาทั้งหมด

การเพิ่มตัวทำเครื่องหมาย

หากต้องการเพิ่มเครื่องหมาย ให้สร้างออบเจ็กต์ GMSMarker ที่มี position และ title แล้วตั้งค่า map

ตัวอย่างต่อไปนี้แสดงวิธีเพิ่มตัวทำเครื่องหมายลงในออบเจ็กต์ GMSMapView ที่มีอยู่ ตัวทำเครื่องหมายจะสร้างขึ้นที่พิกัด 10,10 และแสดงสตริง "Hello world" ในหน้าต่างข้อมูลเมื่อมีการคลิก

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 ของเครื่องหมาย

ข้อมูลโค้ดต่อไปนี้สร้างเครื่องหมายที่มีไอคอนที่กำหนดเองซึ่งระบุเป็น 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 เดียวกันสำหรับเครื่องหมายแต่ละรายการ ซึ่งจะช่วยปรับปรุงประสิทธิภาพของแอปพลิเคชันและเพิ่มประสิทธิภาพการใช้แคชพื้นผิวเมื่อแสดงเครื่องหมายจำนวนมาก

คำเตือน: การเพิ่มเครื่องหมายจำนวนมากที่มีรูปภาพที่กำหนดเองที่ไม่ซ้ำกัน แบบไดนามิก หรือมีความละเอียดสูงอาจทำให้แคชพื้นผิวภายในของ Maps SDK สำหรับ iOS หมด เมื่อความจุแคชเต็มแล้ว อาจเกิดความผิดปกติในการแสดงผล เช่น ไอคอนกะพริบหรือไอคอนสลับกันระหว่างเครื่องหมาย

หากแอปพลิเคชันต้องใช้เครื่องหมายที่ไม่ซ้ำกันหรือสร้างขึ้นแบบไดนามิกจำนวนมาก เราขอแนะนำให้ย้ายข้อมูลไปใช้ GMSAdvancedMarker (รองรับใน Maps SDK สำหรับ iOS 8.2 ขึ้นไป) ในกรณีส่วนใหญ่ คุณคาดว่าจะรองรับเครื่องหมายที่กำหนดเองได้หลายร้อยรายการ แต่ขีดจำกัดนี้ขึ้นอยู่กับขนาดของเครื่องหมายเป็นอย่างมาก และอาจต่ำกว่านี้มาก GMSAdvancedMarker จะแสดงไอคอนโดยตรงโดยใช้มุมมองดั้งเดิม (UIView หรือ CALayers) ซึ่งข้ามระบบการแพ็กแอตลาสพื้นผิวภายในไปโดยสิ้นเชิง

นอกจากนี้ คุณควรใช้ข้อมูลอ้างอิง 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 ไม่ว่าค่าจริงจะเป็นอย่างไร คุณสามารถใช้การแปลงที่ทำงานนอกขอบเขตได้ แต่ต้องวาดออบเจ็กต์ภายในขอบเขตของออบเจ็กต์ ระบบจะตรวจสอบและใช้การแปลง/การเลื่อนทั้งหมด กล่าวโดยย่อคือ มุมมองย่อยต้องอยู่ในมุมมอง
• หากต้องการใช้ -copyWithZone: ใน GMSMarker คุณต้องคัดลอก GMSMarker ก่อน แล้วตั้งค่าอินสแตนซ์ใหม่ของ iconView ในสำเนา UIView ไม่รองรับ NSCopying จึงคัดลอก iconView ไม่ได้

หากต้องการตัดสินใจว่าจะตั้งค่าพร็อพเพอร์ตี้ tracksViewChanges เมื่อใด คุณควรพิจารณาข้อควรพิจารณาด้านประสิทธิภาพเทียบกับข้อดีของการให้ตัวทำเครื่องหมายวาดซ้ำโดยอัตโนมัติ เช่น

• หากต้องการทำการเปลี่ยนแปลงหลายรายการ คุณสามารถเปลี่ยนพร็อพเพอร์ตี้เป็น YES แล้วเปลี่ยนกลับเป็น NO
• เมื่อภาพเคลื่อนไหวทำงานอยู่หรือมีการโหลดเนื้อหาแบบไม่พร้อมกัน คุณควรตั้งค่าพร็อพเพอร์ตี้เป็น YES จนกว่าการดำเนินการจะเสร็จสมบูรณ์

การเปลี่ยนความทึบแสงของเครื่องหมาย

คุณสามารถควบคุมความทึบแสงของเครื่องหมายได้ด้วยพร็อพเพอร์ตี้ opacity คุณควรระบุความทึบแสงเป็นค่าทศนิยมระหว่าง 0.0 ถึง 1.0 โดยที่ 0 คือโปร่งใสทั้งหมด และ 1 คือทึบแสงทั้งหมด

Swift

marker.opacity = 0.6
      

Objective-C

marker.opacity = 0.6;
      

คุณสามารถใส่ภาพเคลื่อนไหวความทึบแสงของเครื่องหมายด้วย Core Animation โดยใช้ 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