以编程方式平移地图不会移动多边形标签

Question

我正在将Angular Maps (X-Map)库与Bing Maps一起使用，以生成带有标记多边形的地图。在我的应用程序的其他位置，我可以单击一些项目以平移到地图上的特定位置。问题在于，发生这种情况时，多边形上的标签不会随其他所有元素一起移动-但是，如果您随后使用鼠标手动平移地图，则它们会突然跳回原处。

下面是一个简单的示例来说明问题（Stackblitz here *）：

*注意：如果在测试此代码时收到“ Node.appendChild的参数1不实现接口Node”，则手动刷新预览使其可以再次工作。不知道这是否相关，但是在我的实际代码中不会发生。

HTML

<x-map style="width: 100%; height: 500px;" [Zoom]="8" [Latitude]="lat" [Longitude]="0">
  <x-map-polygon [Paths]="paths" [ShowTooltip]="false" [ShowLabel]="true" [Title]="title"></x-map-polygon>
</x-map>
<button (click)="clicked()">Click Me!</button>

组件

export class AppComponent  {
  paths = [{latitude: 0.1, longitude: 0.1}, {latitude: -0.1, longitude: 0.1}, {latitude: -0.1, longitude: -0.1}, {latitude: 0.1, longitude: -0.1}]
  title = "test"
  lat = 0
  clicked () {
    this.lat += 0.1
  }
}

当您单击按钮时，它将向下移动地图上除“测试”标签以外的所有内容：

翻阅该库的源代码，最终它是从Bing API调用setView，而我找不到任何选项来强制刷新标签或手动移动它们。我在这里可以做什么？

Answer 1

为多边形组件指定title属性时，label is getting created和多边形实例一起使用。可以通过触发Map BingMapLabel事件来明确更新viewchange的实现方式：

clicked () {
    this.lat += 0.1;

    Microsoft.Maps.Events.addOne(this.nativeMap, 'viewchangeend', () => {
      Microsoft.Maps.Events.invoke(this.nativeMap, "viewchange", null); //trigger viewchange event to update label position
    });
}

可以通过MapPromise事件检索本地Bing Map实例：

<x-map (MapPromise)="mapReady($event)" ... >
    ...
</x-map>

mapReady(mapPromise){
  mapPromise.then(map => {
      this.nativeMap = map; //save map instance 
  });
}  

Updated StackBlitz