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

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

แผนที่ซานฟรานซิสโกที่มีเครื่องหมายที่กำหนดสไตล์เอง

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

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

Map(mode: .hybrid) {
  Marker(
      position: .init(latitude: 51.5074, longitude: -0.1278, altitude: 0.0),
      label: "London",
      style: .pin(.init(scale: 2.0))
  )
}

หน้านี้จะแสดงวิธีปรับแต่งเครื่องหมายด้วยวิธีต่อไปนี้

ปรับขนาดเครื่องหมาย

หากต้องการปรับขนาดเครื่องหมาย ให้ใช้ตัวเลือก scale

Map(mode: .hybrid) {
  Marker(
      position: .init(latitude: 35.6762, longitude: 139.6503, altitude: 0.0),
        label: "Tokyo",
        style: .pin(
          .init(
            backgroundColor: .blue,
            borderColor: .yellow,
            scale: 2.0
            ) {Text("G").minimumScaleFactor(0.01)}
        )
  )
}

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

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

Map(mode: .hybrid){
  Marker(
    position: .init(latitude: 48.8566, longitude: 2.3522, altitude: 0.0),
    label: "Paris",
    style: .pin(.init(backgroundColor: .yellow)) // Changes the pin's background color
  )
}

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

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

Map(mode: .hybrid){
  Marker(
    position: .init(latitude: -22.9068, longitude: -43.1729, altitude: 0.0),
    label: "Rio de Janeiro",
    style: .pin(.init(backgroundColor: .green, borderColor: .brown)) // Customizes the pin border
  )
}

เพิ่มข้อความลงในกลีฟ

ใช้เมธอด markerOptions.glyph เพื่อแทนที่กลีฟเริ่มต้นด้วยอักขระข้อความ กลีฟข้อความของเครื่องหมายจะปรับขนาดตามเครื่องหมาย

Map(mode: .hybrid){
  Marker(
    position: .init(latitude: 25.2048, longitude: 55.2708, altitude: 0.0),
    label: "Dubai",
    style: .pin(.init(backgroundColor: .green)) {
        Text("D") // Adds text inside the marker glyph
    }
  )
}