Advanced Markers API 使用两个类来定义标记:AdvancedMarkerView
类提供默认标记功能,PinView
类包含进一步自定义的选项。本页面介绍了如何通过以下方式自定义标记:
- 添加标题文字
- 缩放标记
- 更改背景颜色
- 更改边框颜色
- 更改字形颜色
- 隐藏字形
添加标题文字
将光标悬停在标记上时会显示标题文字。标题文本对屏幕阅读器可见。使用 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, });