יצירת סמן מתקדם

בחירת פלטפורמה: 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 אפשר להתאים אישית מאפיינים מתקדמים של סמנים, כמו צבע הרקע, צבע הגבול והגליף.

• יוצרים מכונה של המחלקה View ב-Android ומשתמשים בה כדי להגדיר את המכונה AdvancedMarkerOptions.

  מופע התצוגה מאפשר להתאים אישית את הסמן באופן מלא.

שימוש ב-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();

שימוש בסמל התצוגה

השיטה AdvancedMarkerOptions.iconView() מאפשרת להשתמש בכל Android View כסמן. שימוש בתצוגה כסמן יש לכם שליטה מלאה על הסמן.

הערה: כשמשתמשים ב-View כסמן, אל תבצעו פעולה על View כדי להזיז אותו. במקום זאת, אפשר לשנות את Marker עצמו. לדוגמה, כדי לסובב את View, משתמשים ב-method Marker.setRotation(). אין לסובב את View.

קודם יוצרים את התצוגה באפליקציה, ואז משתמשים בשיטה AdvancedMarkerOptions.iconView() כדי להוסיף את התצוגה לסמנים המתקדמים.

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 לא יתאימו לביצועים של מפת סיביות או סמני ברירת מחדל.

השלבים הבאים:

• התנהגות ההתנגשות