สร้างเครื่องหมายขั้นสูง

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

หากต้องการเพิ่มมาร์กเกอร์ขั้นสูงลงในแผนที่ ให้สร้างอินสแตนซ์ใหม่ของ AdvancedMarkerOptions แล้วใช้ GoogleMap.addMarker() เพื่อเพิ่มมาร์กเกอร์

Kotlin

private val SYDNEY = LatLng(-33.87365, 151.20689)

val marker: Marker? = map.addMarker(
    AdvancedMarkerOptions()
        .position(SYDNEY)
        .iconView(textView)
        .zIndex(zIndex)
)

Java

private final LatLng SYDNEY = new LatLng(-33.87365, 151.20689);

Marker marker = map.addMarker(
    new AdvancedMarkerOptions()
        .position(SYDNEY)
        .iconView(textView)
        .zIndex(zIndex));

GoogleMap.addMarker() จะแสดงอินสแตนซ์ของ Marker และคุณสามารถแคสต์ค่าที่แสดงเป็น AdvancedMarkerได้หากจำเป็น

ใช้ AdvancedMarkerOptions เพื่อกำหนดค่ามาร์กเกอร์ขั้นสูง AdvancedMarkerOptions เป็นคลาสย่อยของ MarkerOptions จึงรองรับการตั้งค่าทั้งหมดเหมือนกับ MarkerOptions

AdvancedMarkerOptions ยังช่วยให้คุณทำสิ่งต่อไปนี้ได้ด้วย

• สร้างอินสแตนซ์ของ PinConfig คลาส แล้วใช้อินสแตนซ์ PinConfig เพื่อกำหนดค่าอินสแตนซ์ AdvancedMarkerOptions

  ใช้ PinConfig เพื่อปรับแต่งพร็อพเพอร์ตี้ของมาร์กเกอร์ขั้นสูง เช่น สีพื้นหลัง สีเส้นขอบ และรูปอักขระ

• สร้างอินสแตนซ์ของคลาส Android View แล้วใช้อินสแตนซ์ดังกล่าวเพื่อกำหนดค่าอินสแตนซ์ AdvancedMarkerOptions

  อินสแตนซ์ View ช่วยให้คุณปรับแต่งมาร์กเกอร์ได้อย่างเต็มที่

ใช้ PinConfig

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

• เปลี่ยนสีพื้นหลัง
• เปลี่ยนสีเส้นขอบ
• เปลี่ยนสีสัญลักษณ์หรือเพิ่มข้อความ
• ซ่อนสัญลักษณ์

รูปที่ 1: ส่วนต่างๆ ของมาร์กเกอร์ขั้นสูง

ใช้ PinConfig.Builder เพื่อสร้างอินสแตนซ์ของ PinConfig

Kotlin

// Use PinConfig.Builder to create an instance of PinConfig.
val pinConfigBuilder: PinConfig.Builder = PinConfig.builder()
pinConfigBuilder.setBackgroundColor(Color.MAGENTA)
val pinConfig: PinConfig = pinConfigBuilder.build()


// Use the  PinConfig instance to set the icon for AdvancedMarkerOptions.
val advancedMarkerOptions: AdvancedMarkerOptions = AdvancedMarkerOptions()
    .icon(BitmapDescriptorFactory.fromPinConfig(pinConfig))
    .position(MARKER_POSITION)

// Pass the AdvancedMarkerOptions instance to addMarker().
val marker: Marker? = map.addMarker(advancedMarkerOptions)

Java

// Use PinConfig.Builder to create an instance of PinConfig.
PinConfig.Builder pinConfigBuilder = PinConfig.builder();
pinConfigBuilder.setBackgroundColor(Color.MAGENTA);
PinConfig pinConfig = pinConfigBuilder.build();

// Use the  PinConfig instance to set the icon for AdvancedMarkerOptions.
AdvancedMarkerOptions advancedMarkerOptions =
    new AdvancedMarkerOptions()
        .icon(BitmapDescriptorFactory.fromPinConfig(pinConfig))
        .position(MARKER_POSITION);

// Pass the AdvancedMarkerOptions instance to addMarker().
Marker marker = map.addMarker(advancedMarkerOptions);

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

ใช้เมธอด PinConfig.background() เพื่อเปลี่ยนสีพื้นหลังของมาร์กเกอร์

Kotlin

// Use PinConfig.Builder to create an instance of PinConfig.
val pinConfigBuilder: PinConfig.Builder = PinConfig.builder()
pinConfigBuilder.setBackgroundColor(Color.MAGENTA)
val pinConfig: PinConfig = pinConfigBuilder.build()

Java

// Use PinConfig.Builder to create an instance of PinConfig.
PinConfig.Builder pinConfigBuilder = PinConfig.builder();
pinConfigBuilder.setBackgroundColor(Color.MAGENTA);
PinConfig pinConfig = pinConfigBuilder.build();

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

ใช้เมธอด PinConfig.borderColor() เพื่อเปลี่ยนสีเส้นขอบของมาร์กเกอร์

Kotlin

// Set the border color.
val pinConfigBuilder: PinConfig.Builder = PinConfig.builder()
pinConfigBuilder.setBorderColor(Color.BLUE)
val pinConfig: PinConfig = pinConfigBuilder.build()

Java

// Set the border color.
PinConfig.Builder pinConfigBuilder = PinConfig.builder();
pinConfigBuilder.setBorderColor(Color.BLUE);
PinConfig pinConfig = pinConfigBuilder.build();

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

สร้าง Glyph อินสแตนซ์ แล้วใช้อินสแตนซ์ดังกล่าวเพื่อกำหนดค่า PinConfig ใช้รูปอักขระเพื่อตั้งค่าข้อความและสีข้อความของรูปอักขระ สีรูปอักขระ หรือระบุรูปภาพที่กำหนดเองเพื่อใช้เป็นรูปอักขระ

ตัวอย่างต่อไปนี้จะตั้งค่าข้อความของรูปอักขระ

Kotlin

// Set the glyph text.
val pinConfigBuilder: PinConfig.Builder = PinConfig.builder()
val glyphText = Glyph("A")

// Alteratively, you can set the text color:
// Glyph glyphText = new Glyph("A", Color.GREEN);

pinConfigBuilder.setGlyph(glyphText)
val pinConfig: PinConfig = pinConfigBuilder.build()

Java

// Set the glyph text.
PinConfig.Builder pinConfigBuilder = PinConfig.builder();
PinConfig.Glyph glyphText = new PinConfig.Glyph("A");

// Alternatively, you can set the text color:
// PinConfig.Glyph glyphText = new PinConfig.Glyph("A", Color.GREEN);

pinConfigBuilder.setGlyph(glyphText);
PinConfig pinConfig = pinConfigBuilder.build();

ตั้งค่าสีรูปอักขระ

Kotlin

val glyphColor = PinConfig.Glyph(Color.BLUE)
pinConfigBuilder.setGlyph(glyphColor)
val pinConfig: PinConfig = pinConfigBuilder.build()

Java

PinConfig.Glyph glyphColor = new PinConfig.Glyph(Color.BLUE);
pinConfigBuilder.setGlyph(glyphColor);
PinConfig pinConfig = pinConfigBuilder.build();

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

Kotlin

// Set the glyph image.
val glyphImage: Int = R.drawable.example_image
val descriptor = PinConfig.BitmapDescriptorFactory.fromResource(glyphImage)
pinConfigBuilder.setGlyph(Glyph(descriptor))
val pinConfig: PinConfig = pinConfigBuilder.build()

Java

// Set the glyph image.
int glyphImage = R.drawable.example_image;
BitmapDescriptor descriptor = BitmapDescriptorFactory.fromResource(glyphImage);
pinConfigBuilder.setGlyph(new PinConfig.Glyph(descriptor));
PinConfig pinConfig = pinConfigBuilder.build();

ซ่อนสัญลักษณ์

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

Kotlin

// Create a transparent glyph.
val pinConfigBuilder: PinConfig.Builder = PinConfig.builder()
pinConfigBuilder.setBackgroundColor(Color.MAGENTA)
pinConfigBuilder.setGlyph(PinConfig.Glyph(Color.TRANSPARENT))
val pinConfig: PinConfig = pinConfigBuilder.build()

Java

// Create a transparent glyph.
PinConfig.Builder pinConfigBuilder = PinConfig.builder();
pinConfigBuilder.setBackgroundColor(Color.MAGENTA);
pinConfigBuilder.setGlyph(new PinConfig.Glyph(Color.TRANSPARENT));
PinConfig pinConfig = pinConfigBuilder.build();

ใช้ iconView

เมธอด AdvancedMarkerOptions.iconView() ช่วยให้คุณใช้ Android View เป็นมาร์กเกอร์ การใช้ View เป็นมาร์กเกอร์จะช่วยให้คุณควบคุมมาร์กเกอร์ได้อย่างสมบูรณ์

หมายเหตุ: เมื่อใช้ View เป็นตัวทำเครื่องหมาย ห้ามดำเนินการกับ View เพื่อย้ายตัวทำเครื่องหมาย แต่ให้แก้ไข Marker เองแทน เช่น หากต้องการหมุน View ให้ใช้เมธอด Marker.setRotation() ห้ามหมุน View

ในแอป ให้สร้าง View ก่อน แล้วใช้เมธอด AdvancedMarkerOptions.iconView() เพื่อเพิ่ม View ลงในมาร์กเกอร์ขั้นสูง

Kotlin

// Create a TextView to use as the marker.
val textView = TextView(this)
textView.text = "Hello!!"
textView.setBackgroundColor(Color.BLACK)
textView.setTextColor(Color.YELLOW)

val marker: Marker? = map.addMarker(
    AdvancedMarkerOptions()
        .position(SYDNEY)
        .iconView(textView)
)

Java

// Create a TextView to use as the marker.
TextView textView = new TextView(this);
textView.setText("Hello!!");
textView.setBackgroundColor(Color.BLACK);
textView.setTextColor(Color.YELLOW);

Marker marker = map.addMarker(
    new AdvancedMarkerOptions()
        .position(SYDNEY)
        .iconView(textView));

**ข้อควรระวัง:** ประสิทธิภาพของมุมมองแผนที่ที่มีมาร์กเกอร์ iconView อาจไม่ตรงกับ ประสิทธิภาพของมาร์กเกอร์บิตแมปหรือมาร์กเกอร์เริ่มต้น

ขั้นตอนถัดไป

• ลักษณะการทำงานเมื่อเกิดการชนกัน