การปรับแต่งเครื่องหมาย

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

ภาพหน้าจอของรูปแบบที่กำหนดเองต่างๆ
ปากกามาร์กเกอร์

เครื่องหมายขั้นสูงใช้ 2 คลาสในการกำหนดเครื่องหมาย ได้แก่ คลาส GMSAdvancedMarker มีเครื่องหมายเริ่มต้น และ GMSPinImageOptions มีตัวเลือก สำหรับการปรับแต่งเพิ่มเติม หน้านี้จะแสดงวิธีปรับแต่งเครื่องหมายใน วิธีต่อไปนี้

  • เปลี่ยนสีพื้นหลัง
  • เปลี่ยนสีเส้นขอบ
  • เปลี่ยนสีรูปอักขระ
  • เปลี่ยนข้อความรูปอักขระ
  • รองรับมุมมองและภาพเคลื่อนไหวที่กำหนดเองด้วยพร็อพเพอร์ตี้ iconView
ส่วนต่างๆ ของเครื่องหมายขั้นสูง
รูปที่ 1: ส่วนต่างๆ ของเครื่องหมายขั้นสูง

เปลี่ยนสีพื้นหลัง

ใช้ตัวเลือก GMSPinImageOptions.backgroundColor เพื่อ เปลี่ยนสีพื้นหลังของตัวทำเครื่องหมาย

Swift

//...

let options = GMSPinImageOptions()
options.backgroundColor = .blue

let pinImage = GMSPinImage(options: options)
advancedMarker.icon = pinImage

advancedMarker.map = mapView

Objective-C

//...

GMSPinImageOptions *options = [[GMSPinImageOptions alloc] init];
options.backgroundColor = [UIColor blueColor];

GMSPinImage *pin = [GMSPinImage pinImageWithOptions:options];
customTextMarker.icon = pin;

customTextMarker.map = mapView;

เปลี่ยนสีเส้นขอบ

ใช้ตัวเลือก GMSPinImageOptions.borderColor เพื่อเปลี่ยน สีพื้นหลังของเครื่องหมาย

Swift

//...

let options = GMSPinImageOptions()
options.borderColor = .blue

let pinImage = GMSPinImage(options: options)
advancedMarker.icon = pinImage

advancedMarker.map = mapView

Objective-C

//...

GMSPinImageOptions *options = [[GMSPinImageOptions alloc] init];
options.backgroundColor = [UIColor blueColor];

GMSPinImage *pin = [GMSPinImage pinImageWithOptions:options];
advancedMarker.icon = pin;

advancedMarker.map = mapView;

เปลี่ยนสีรูปอักขระ

ใช้ GMSPinImageGlyph.glyphColor เพื่อเปลี่ยนพื้นหลัง สีของเครื่องหมาย

Swift

//...

let options = GMSPinImageOptions()

let glyph = GMSPinImageGlyph(glyphColor: .yellow)
options.glyph = glyph

let glyphColor = GMSPinImage(options: options)

advancedMarker.icon = glyphColor
advancedMarker.map = mapView

Objective-C

//...

GMSPinImageOptions *options = [[GMSPinImageOptions alloc] init];

options.glyph = [[GMSPinImageGlyph alloc] initWithGlyphColor:[UIColor yellowColor]];
GMSPinImage *glyphColor = [GMSPinImage pinImageWithOptions:options];

advancedMarker.icon = glyphColor;
advancedMarker.map = mapView;

เปลี่ยนข้อความรูปอักขระ

ใช้ GMSPinImageGlyph เพื่อเปลี่ยนข้อความรูปอักขระของเครื่องหมาย

Swift

//...

let options = GMSPinImageOptions()

let glyph = GMSPinImageGlyph(text: "ABC", textColor: .white)
options.glyph = glyph

let pinImage = GMSPinImage(options: options)

advancedMarker.icon = pinImage
advancedMarker.map = mapView

Objective-C

//...

GMSPinImageOptions *options = [[GMSPinImageOptions alloc] init];

options.glyph = [[GMSPinImageGlyph alloc] initWithText:@"ABC" textColor:[UIColor whiteColor]];
GMSPinImage *pin = [GMSPinImage pinImageWithOptions:options];

customTextMarker.icon = pin;
customTextMarker.map = mapView;

รองรับมุมมองและภาพเคลื่อนไหวที่กำหนดเองด้วยพร็อพเพอร์ตี้ iconView

คล้ายกับ GMSMarker, GMSAdvancedMarker ยังสนับสนุนเครื่องหมายที่มี iconView พร็อพเพอร์ตี้ iconView รองรับภาพเคลื่อนไหวของพร็อพเพอร์ตี้ที่เคลื่อนไหวได้ทั้งหมดของ UIView ยกเว้นเฟรมและกึ่งกลาง ไม่รองรับเครื่องหมายที่มี iconViews และ icons แสดงบนแผนที่เดียวกัน

Swift

//...

let advancedMarker = GMSAdvancedMarker(position: coordinate)
advancedMarker.iconView = customView()
advancedMarker.map = mapView

func customView() -> UIView {
// return your custom UIView.
}

Objective-C

//...

GMSAdvancedMarker *advancedMarker = [GMSAdvancedMarker markerWithPosition:kCoordinate];
advancedMarker.iconView = [self customView];
advancedMarker.map = self.mapView;

-   (UIView *)customView {
  // return custom view
}

ข้อจำกัดของเลย์เอาต์

GMSAdvancedMarker ไม่รองรับเลย์เอาต์โดยตรง ข้อจำกัดสำหรับiconView แต่คุณสามารถตั้งค่าข้อจำกัดการจัดวางสำหรับผู้ใช้ เอลิเมนต์อินเทอร์เฟซภายใน iconView ขณะสร้างมุมมองของคุณ ออบเจ็กต์ ควรส่ง frame หรือ size ไปยังเครื่องหมาย

Swift

//do not set advancedMarker.iconView.translatesAutoresizingMaskIntoConstraints = false

let advancedMarker = GMSAdvancedMarker(position: coordinate)
let customView = customView()

//set frame
customView.frame = CGRect(0, 0, width, height)

advancedMarker.iconView = customView

Objective-C

//do not set advancedMarker.iconView.translatesAutoresizingMaskIntoConstraints = NO;

GMSAdvancedMarker *advancedMarker = [GMSAdvancedMarker markerWithPosition:kCoordinate];

CustomView *customView = [self customView];

//set frame
customView.frame = CGRectMake(0, 0, width, height);

advancedMarker.iconView = customView;