自定义基本标记

Advanced Markers API 使用两个类来定义标记:AdvancedMarkerView 类提供默认标记功能,PinView 类包含进一步自定义的选项。本页面介绍了如何通过以下方式自定义标记:

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

添加标题文字

将光标悬停在标记上时会显示标题文字。标题文本对屏幕阅读器可见。使用 AdvancedMarkerView.title 选项向标记添加标题文本:

TypeScript

// Default marker with title text (no PinView).
const markerViewWithText = new google.maps.marker.AdvancedMarkerView({
    map,
    position: { lat: 37.419, lng: -122.03 },
    title: 'Title text for the marker at lat: 37.419, lng: -122.03',
});

JavaScript

// Default marker with title text (no PinView).
const markerViewWithText = new google.maps.marker.AdvancedMarkerView({
  map,
  position: { lat: 37.419, lng: -122.03 },
  title: "Title text for the marker at lat: 37.419, lng: -122.03",
});

缩放标记

使用 PinView.scale 选项调整标记的缩放比例:

TypeScript

// Adjust the scale.
const pinViewScaled = new google.maps.marker.PinView({
    scale: 1.5,
});
const markerViewScaled = new google.maps.marker.AdvancedMarkerView({
    map,
    position: { lat: 37.419, lng: -122.02 },
    content: pinViewScaled.element,
});

JavaScript

// Adjust the scale.
const pinViewScaled = new google.maps.marker.PinView({
  scale: 1.5,
});
const markerViewScaled = new google.maps.marker.AdvancedMarkerView({
  map,
  position: { lat: 37.419, lng: -122.02 },
  content: pinViewScaled.element,
});

更改背景颜色

使用 PinView.background 选项更改标记的背景颜色:

TypeScript

// Change the background color.
const pinViewBackground = new google.maps.marker.PinView({
    background: '#FBBC04',
});
const markerViewBackground = new google.maps.marker.AdvancedMarkerView({
    map,
    position: { lat: 37.419, lng: -122.01 },
    content: pinViewBackground.element,
});

JavaScript

// Change the background color.
const pinViewBackground = new google.maps.marker.PinView({
  background: "#FBBC04",
});
const markerViewBackground = new google.maps.marker.AdvancedMarkerView({
  map,
  position: { lat: 37.419, lng: -122.01 },
  content: pinViewBackground.element,
});

更改边框颜色

使用 PinView.borderColor 选项更改标记的边框颜色:

TypeScript

// Change the border color.
const pinViewBorder = new google.maps.marker.PinView({
    borderColor: '#137333',
});
const markerViewBorder = new google.maps.marker.AdvancedMarkerView({
    map,
    position: { lat: 37.415, lng: -122.03 },
    content: pinViewBorder.element,
});

JavaScript

// Change the border color.
const pinViewBorder = new google.maps.marker.PinView({
  borderColor: "#137333",
});
const markerViewBorder = new google.maps.marker.AdvancedMarkerView({
  map,
  position: { lat: 37.415, lng: -122.03 },
  content: pinViewBorder.element,
});

更改字形颜色

使用 PinView.glyphColor 选项可更改标记的字形颜色:

TypeScript

// Change the glyph color.
const pinViewGlyph = new google.maps.marker.PinView({
    glyphColor: 'white',
});
const markerViewGlyph = new google.maps.marker.AdvancedMarkerView({
    map,
    position: { lat: 37.415, lng: -122.02 },
    content: pinViewGlyph.element,
});

JavaScript

// Change the glyph color.
const pinViewGlyph = new google.maps.marker.PinView({
  glyphColor: "white",
});
const markerViewGlyph = new google.maps.marker.AdvancedMarkerView({
  map,
  position: { lat: 37.415, lng: -122.02 },
  content: pinViewGlyph.element,
});

隐藏字形

PinView.glyph 选项设置为空字符串以隐藏标记的字形:

TypeScript

// Hide the glyph.
const pinViewNoGlyph = new google.maps.marker.PinView({
    glyph: '',
});
const markerViewNoGlyph = new google.maps.marker.AdvancedMarkerView({
    map,
    position: { lat: 37.415, lng: -122.01 },
    content: pinViewNoGlyph.element,
});

JavaScript

// Hide the glyph.
const pinViewNoGlyph = new google.maps.marker.PinView({
  glyph: "",
});
const markerViewNoGlyph = new google.maps.marker.AdvancedMarkerView({
  map,
  position: { lat: 37.415, lng: -122.01 },
  content: pinViewNoGlyph.element,
});

后续步骤: