使用标记吸引用户关注地图上的某个位置。本指南介绍了如何在 3D 地图中使用和自定义标记,除了标记出现的海拔高度外,您还可以控制标记的形状、大小和颜色。
在地图上使用标记显示位置。上面的示例展示了一个基本的单个标记,未应用任何自定义设置。
自定义颜色、比例和图标图片
自定义默认标记的背景、字形、边框颜色和大小。
将默认标记图标替换为自定义 SVG 资源。
设置标记的海拔高度
您可以通过拉伸标记并设置海拔高度来设置标记的海拔高度。
让标记响应点击事件和键盘事件
通过添加 click
事件监听器,使标记响应点击和键盘事件。
function initMap() {
const map = new Map3DElement({
center: { lat: 37.4690, lng: -122.1074, altitude: 0 },
tilt: 67.5,
range: 45000,
mode: MapMode.HYBRID
});
const interactiveMarker = new google.maps.marker.Marker3DInteractiveElement({
map,
position: {lat: 37.4239163, lng: -122.0947209},
});
interactiveMarker.addEventListener('gmp-click', (event) => {
// Handle the click event.
// ...
});
}
设置标记冲突行为
指定某个标记与其他标记或地图标签冲突时的行为方式。
const marker = new Marker3DElement({
position: {lat, lng},
collisionBehavior: google.maps.CollisionBehavior.REQUIRED
});