建立進階標記

選取平台： 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 做為標記。使用檢視區塊做為標記，便能完全控管標記。

在應用程式中，請先建立檢視區塊，然後使用 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));

後續步驟：