自定义HTML的Advanced Marker点击缩放及Pinelement自定义配置问询

一、实现点击缩放/失焦恢复尺寸功能 #

你可以通过CSS过渡+事件监听的方式实现，步骤如下：

1. 添加CSS过渡样式：让缩放效果更平滑

.marker-container {
  transition: transform 0.2s ease;
  cursor: pointer;
}
.marker-container.active {
  transform: scale(1.3); /* 可自定义缩放比例 */
}
/* 也可直接针对img元素设置 */
.marker-container-img {
  transition: transform 0.2s ease;
}
.marker-container.active .marker-container-img {
  transform: scale(1.3);
}

2. 绑定点击事件处理逻辑

// 你的现有创建标记代码
const markerHtml = document.createElement('div');
markerHtml.className = 'marker-container';
markerHtml.innerHTML = `<img class="marker-container-img" src="${url}"/>`;

const googleMarker = new google.maps.marker.AdvancedMarkerElement({
  position: yourMarkerPosition,
  map: yourMapInstance,
  content: markerHtml,
});

// 标记点击：添加active类触发缩放
googleMarker.addListener('click', () => {
  // 移除其他标记的active状态（多标记场景）
  document.querySelectorAll('.marker-container.active').forEach(el => el.classList.remove('active'));
  // 给当前标记添加缩放类
  googleMarker.content.classList.add('active');
});

// 地图点击：恢复标记原尺寸
yourMapInstance.addListener('click', (e) => {
  // 判断点击区域不是当前标记
  if (!e.overlay || e.overlay !== googleMarker) {
    googleMarker.content.classList.remove('active');
  }
});

如果不想用CSS类，也可以直接修改元素内联样式：

// 点击缩放
googleMarker.addListener('click', () => {
  googleMarker.content.querySelector('.marker-container-img').style.transform = 'scale(1.3)';
});

// 失焦恢复
yourMapInstance.addListener('click', (e) => {
  if (!e.overlay || e.overlay !== googleMarker) {
    googleMarker.content.querySelector('.marker-container-img').style.transform = 'scale(1)';
  }
});

二、使用PinElement自定义SVG标记并添加标签 #

完全可以用PinElement实现自定义SVG作为标记背景，同时添加标签文本，示例如下：

1. 基础用法：SVG背景+纯文本标签

// 自定义SVG背景（替换为你的SVG内容）
const customSvg = `
<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
  <circle cx="20" cy="20" r="18" fill="#FF5722" stroke="#fff" stroke-width="2"/>
  <text x="20" y="25" text-anchor="middle" fill="#fff" font-size="16">P</text>
</svg>
`;

// 创建PinElement
const pinElement = new google.maps.marker.PinElement({
  background: customSvg,
  backgroundSize: '38px 38px', // 调整背景尺寸
  content: '10', // 设置标签文本
});

// 创建带PinElement的Advanced Marker
const customMarker = new google.maps.marker.AdvancedMarkerElement({
  position: yourMarkerPosition,
  map: yourMapInstance,
  content: pinElement.element, // 注意取PinElement的element属性
});

2. 进阶：自定义HTML标签样式
   如果需要更复杂的标签样式，可以直接传入HTML元素：

const customLabel = document.createElement('div');
customLabel.style.cssText = `
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  width: 100%;
  margin-top: 4px;
`;
customLabel.textContent = 'VIP';

const pinElement = new google.maps.marker.PinElement({
  background: customSvg,
  content: customLabel,
});

内容的提问来源于stack exchange，提问作者Tennie