Программное панорамирование карты не перемещает надписи полигонов - PullRequest
Новая
       29

Программное панорамирование карты не перемещает надписи полигонов

0 голосов
/ 31 мая 2019

Я использую библиотеку Angular Maps (X-Map) с Bing Maps для создания карты с помеченными на ней многоугольниками. В другом месте моего приложения у меня есть элементы, по которым можно щелкнуть, чтобы перемещаться в определенные места на карте. Проблема в том, что когда это происходит, надписи на многоугольниках не перемещаются вместе со всем остальным, но если вы затем используете мышь для ручного панорамирования карты, они внезапно возвращаются на свои места.

Вот простой пример, который демонстрирует проблему ( Stackblitz здесь *):

* Примечание: если во время тестирования вы получаете «Аргумент 1 Node.appendChild не реализует интерфейсный узел», ручное обновление предварительного просмотра заставляет его работать снова. Не уверен, связано это или нет, но в моем реальном коде это не происходит.

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
  }
}

Когда вы нажимаете кнопку, она перемещает все на карте вниз, кроме метки «test»:

An animation demonstrating the label not moving properly

Копаясь в исходном коде библиотеки, в конечном итоге он вызывает setView из Bing API , и я не могу найти никаких вариантов, чтобы принудительно обновить ярлыки или переместить их вручную , Что я могу сделать здесь?

1 Ответ

0 голосов
/ 14 июня 2019

Когда для компонента многоугольника указано свойство title, создается метка вместе с экземпляром многоугольника. Способ реализации BingMapLabel позволяет явно обновлять его позицию, вызывая событие Map 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
    });
}

где собственный экземпляр карты Bing можно получить с помощью события MapPromise: 

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

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

Обновлен StackBlitz

...