Angular集成Maptiler API：缩放时标记点偏移方向错误求助

数据老陈

2026-7-2

缩放时Maptiler Marker偏移问题的修复方案

以下是针对你遇到的缩放时Marker错位问题的排查和修复步骤：

1. 修正地图容器的CSS配置

你的容器样式可能导致地图初始化时尺寸计算异常，进而影响Marker的定位逻辑。更新SCSS：

.map-wrap {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden; /* 避免滚动条干扰地图尺寸计算 */
}

.map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

2. 在地图加载完成后添加Marker

Maptiler的Marker需要绑定到地图的加载生命周期，否则无法正确监听缩放事件。修改组件代码：

ngAfterViewInit() {
  const initialState = { lng: 15.421371, lat: 47.076668, zoom: 14 };

  this.map = new Map({
    container: this.mapContainer.nativeElement,
    style: MapStyle.WINTER,
    center: [initialState.lng, initialState.lat],
    zoom: initialState.zoom
  });

  // 等待地图完全加载后插入Marker
  this.map.on('load', () => {
    new Marker({color: "#FF0000"})
      .setLngLat([15.421371,47.076668])
      .addTo(this.map!);
  });
}

3. 移除无关导入

代码中导入的getContainingImportDeclaration与Maptiler功能无关，可能引发潜在冲突，直接删除该行：

// 删除此行
import {getContainingImportDeclaration} from "@angular/compiler-cli/src/ngtsc/reflection/src/typescript";

4. 验证坐标系与SDK版本

确认使用的是[经度, 纬度]的WGS84坐标格式（你的代码已符合要求，可显式指定坐标系确保兼容性）：
```
new Marker({color: "#FF0000"})
  .setLngLat([15.421371,47.076668], { projection: 'EPSG:4326' })
  .addTo(this.map!);
```
更新@maptiler/sdk到最新版本，旧版本存在已知的Marker缩放偏移bug。