创建高级标记

请选择平台: Android iOS JavaScript

如需向地图添加高级标记,请创建一个新的 AdvancedMarkerOptions 实例,然后使用 GoogleMap.addMarker() 添加标记:

KotlinJava

private val SYDNEY = LatLng(-33.87365, 151.20689)

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

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 配置高级标记。AdvancedMarkerOptionsMarkerOptions 的子类,因此支持 MarkerOptions 支持的所有设置。

借助 AdvancedMarkerOptions,您还可以:

  • 创建 PinConfig 类的实例,然后使用 PinConfig 实例配置 AdvancedMarkerOptions 实例。

    使用 PinConfig 自定义高级标记的属性,例如背景颜色、边框颜色和字形。

  • 创建 Android View 类的实例,然后使用此实例配置 AdvancedMarkerOptions 实例。

    您可以通过 View 实例全面自定义标记。

使用 PinConfig

PinConfig 类包含用于自定义高级标记的选项。使用 PinConfig 执行以下操作:

  • 更改背景颜色
  • 更改边框颜色
  • 更改字形颜色或添加文本
  • 隐藏字形
显示高级标记各个部分的示意图。
图 1:高级标记的各个部分。

使用 PinConfig.Builder 创建 PinConfig 实例:

KotlinJava

// 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)

// 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() 方法更改标记的背景颜色:

KotlinJava

// 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 PinConfig.Builder to create an instance of PinConfig.
PinConfig.Builder pinConfigBuilder = PinConfig.builder();
pinConfigBuilder
.setBackgroundColor(Color.MAGENTA);
PinConfig pinConfig = pinConfigBuilder.build();

更改边框颜色

使用 PinConfig.borderColor() 方法更改标记的边框颜色:

KotlinJava

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

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

更改字形

创建 Glyph 实例,然后使用此实例配置 PinConfig。使用字形设置字形文本和文本颜色(字形颜色),或指定用作字形的自定义图片。

以下示例设置了字形文本:

KotlinJava

// 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()

// 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();

设置字形颜色:

KotlinJava

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

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

设置用作字形的自定义图片。如果您想在标记中使用自定义徽标或其他视觉指示元素,此方法会很有用。

KotlinJava

// 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()

// 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();

隐藏字形

您可以隐藏字形,让背景颜色填充整个标记:

KotlinJava

// 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()

// 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,然后使用 AdvancedMarkerOptions.iconView() 方法将 View 添加到高级标记中。

KotlinJava

// 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)
)

// 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));

后续步骤: