Google Maps标记迁移：从Marker到AdvancedMarkerElement的疑问

AdvancedMarkerElement和传统Marker的API逻辑差异较大，仅替换实例化代码不足以支持记录信息编辑功能，需从以下核心部分调整：

1. 信息窗口（InfoWindow）的绑定逻辑 #

传统Marker依赖Google Maps事件系统绑定点击事件，而AdvancedMarkerElement是DOM元素，需改用标准DOM事件监听，同时调整InfoWindow的打开方式：

// 原Marker的绑定写法
marker.addListener('click', () => {
  infoWindow.open(map, marker);
});

// AdvancedMarkerElement的正确写法
marker.element.addEventListener('click', () => {
  infoWindow.open({
    anchor: marker,
    map: map
  });
});

2. 自定义数据的存储方式 #

你代码中直接给AdvancedMarkerElement添加i属性的写法不符合API规范，需通过DOM元素的dataset属性存储自定义数据（比如记录索引、详情）：

// 错误写法
marker = new google.maps.marker.AdvancedMarkerElement({
  position: { lat, lng },
  i, // 不支持直接自定义属性
  map
});

// 正确写法
marker = new google.maps.marker.AdvancedMarkerElement({
  position: { lat, lng },
  map
});
// 用dataset存储自定义数据
marker.element.dataset.index = i;
marker.element.dataset.name = name;

// 后续获取数据
const currentIndex = parseInt(marker.element.dataset.index);

3. 标记拖动与位置更新逻辑 #

若编辑功能涉及标记拖动修改位置，需调整拖动开启参数和事件监听方式：

// 开启标记拖动
marker = new google.maps.marker.AdvancedMarkerElement({
  position: { lat, lng },
  gmpDraggable: true, // 替代原Marker的draggable: true
  map
});

// 监听拖动结束，获取新位置更新记录
marker.addEventListener('dragend', (event) => {
  const newPosition = event.latLng;
  // 此处更新对应记录的location字段
});

4. 信息窗口的动态内容渲染 #

编辑记录后要确保InfoWindow显示最新数据，需在点击标记时动态从数据源获取最新信息，而非依赖初始化时的静态值：

marker.element.addEventListener('click', () => {
  const index = parseInt(marker.element.dataset.index);
  const latestData = data[index];
  infoWindow.setContent(`
    <div>
      <h3>${latestData.name}</h3>
      <p>${latestData.road}</p>
      <button onclick="editRecord(${index})">编辑</button>
    </div>
  `);
  infoWindow.open({ anchor: marker, map });
});

5. 标记实例的管理与批量更新 #

如果需要批量刷新标记（比如编辑记录后更新对应标记的位置），要确保存储标记实例的数组（你的infoPop）能正确关联记录索引，方便后续定位修改：

// 初始化时将标记存入数组
infoPop.push(marker);

// 编辑后更新对应标记位置
function updateMarkerPosition(index, newLat, newLng) {
  const targetMarker = infoPop[index];
  targetMarker.position = { lat: newLat, lng: newLng };
}

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