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

เลือกแพลตฟอร์ม แอนดรอยด์ iOS JavaScript

เครื่องหมายระบุสถานที่หนึ่งแห่งบนแผนที่

โดยค่าเริ่มต้น เครื่องหมายจะใช้ไอคอนมาตรฐานที่มีรูปลักษณ์ทั่วไปของ 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