高德地图api 一放大图标消失

### 高德地图 API 缩放时图标消失的解决方案

在 web 项目中使用高德地图 API 进行开发时，可能会遇到缩放地图过程中标注点丢失的问题。这通常是因为默认配置下，某些标记对象可能未被正确处理或更新其位置。

为了防止这种情况的发生，可以采取以下措施：

#### 方法一：监听地图缩放事件并重新绘制标记
通过监听 `zoomend` 事件来检测用户的每一次缩放操作，并在此基础上刷新所有的 Marker 或者 OverlayLayer 实例[^3]。

map.on('zoomend', function() {
    // 清除现有 marker 并创建新的实例
    markers.forEach(marker => map.remove(marker));
    
    initMarkers(); // 假设这是初始化所有marker的方法
    
});

#### 方法二：调整 Marker 的属性设置
确保每次添加新 Marker 到地图上时都指定了合适的参数选项，特别是对于 icon 属性来说要指定大小尺寸以及 anchor 锚点等重要信息。

var marker = new AMap.Marker({
    position: lngLat,
    title: 'Marker',
    offset: new AMap.Pixel(-10,-20),// 设置偏移量使icon中心位于坐标处
    icon: "http://webapi.amap.com/images/marker.png", 
    draggable: false,
    raiseOnDrag: true
});

function setIconSize(iconUrl, width, height){
     var img = document.createElement("img");
     img.src = iconUrl;
     img.width = width;
     img.height = height;

     return new AMap.Icon({
         size:new AMap.Size(width,height),
         image:img.src,
         imageSize:new AMap.Size(width,height)
     });
}

以上两种方式都可以有效解决由于缩放引起的数据展示异常情况。具体实现可根据实际需求选择合适的方式应用到项目当中去。