GMAP同一位置生成双标记且数值更新后标记未自动更新问题求解

问题根因 #

两个异常均由配置错误和API使用不规范导致：

1. 标记未即时更新是因为Marker初始化时未指定map属性，且scaledSize参数位置错误，导致标记默认不挂载到地图，仅在缩放触发地图重绘时才渲染。
2. 旧标记重叠是因为废弃的MarkerImage API存在渲染缓存，且清空标记后未主动触发地图重绘，部分未被回收的标记残留在画布上。

修复步骤 #

• 修正Marker初始化参数，新增map绑定，调整scaledSize位置

let marker = new this.google.maps.Marker({            
  position: {
    lat: parseFloat(home.position.lat),
    lng: parseFloat(home.position.lng),
  },
  map: this.map, // 绑定当前地图实例，标记生成后自动挂载
  icon: {
    url: url,
    scaledSize: new this.google.maps.Size(18, 18) // 缩放参数需放在icon配置内
  },
  label: { color: '#FFFFFF', fontWeight: 'bold', fontSize: '10px', text: String(price)} 
});

• 替换废弃的MarkerImage API，使用标准图标配置

let iconConfig = null
if(home.info.status === "CT" && !favList){
  iconConfig = {
    url: '/assets/icons/contigment.png',
    size: new google.maps.Size(108, 120),
    origin: new google.maps.Point(-25, -27),
    anchor: new google.maps.Point(-69,0),
    scaledSize: new this.google.maps.Size(18, 18)
  }
} else if(home.info.status === "CT" && favList){
  iconConfig = {
    url: '/assets/icons/contigmentheart.png',
    size: new google.maps.Size(108, 120),
    origin: new google.maps.Point(-25, -27),
    anchor: new google.maps.Point(-69,0),
    scaledSize: new this.google.maps.Size(18, 18)
  }
}
// 初始化Marker时直接传入iconConfig即可

• 优化标记清空逻辑，主动清除渲染缓存

for (var i = 0; i < this.markerList.length; i++) {     
  this.markerList[i].setMap(null);
}    
this.markerList = [];
// 强制触发地图重绘，清空残留的渲染缓存
this.google.maps.event.trigger(this.map, 'resize');

• 排查异步时序问题
  如果标记生成依赖异步接口返回，需确保上次的异步请求已终止再执行清空操作，避免未被存入markerList的标记挂载到地图后无法被清理。

问题截图参考 #

• 更新前标记：
• 更新后标记：
• 重叠标记异常：

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