次のコードを使用して、AngularアプリにGoogleマップを表示しています。
<agm-map id="map" [(latitude)]="lat" [zoom]="zoom" [(longitude)]="lng" [zoomControl]="false"
[streetViewControl]="false">
</agm-map>
<span>{{lat}} : {{lng}}</span>
ロードすると、動作し、コントローラーにある初期座標を取得します。
コントローラでlatまたはを更新すると、lng機能し、マップとスパンの両方が正しく更新されます。
しかし、マウスで地図を移動すると、latとlngが更新されません。
場所に応じてマーカーのコレクションを変更する必要があります。
これはサポートされていませんか、それとも私は何を間違っていますか？
centerChange出力イベントエミッターを使用して、緯度と緯度を取得します。コメントで@AshotAleqsanyanが述べたように、debounceTime演算子を使用して、値の出力を遅らせることができます。
component.html
<agm-map id="map" [(latitude)]="lat" [zoom]="zoom" [(longitude)]="lng" [zoomControl]="false" (centerChange)="centerChange($event)"
[streetViewControl]="false">
</agm-map>
<span>{{lat}} : {{lng}}</span>
component.ts
輸入
import { Component, OnInit } from "@angular/core";
import { Subject } from "rxjs";
import { debounceTime } from "rxjs/operators";
export class Component implements OnInit {
subject: Subject<LatLngLiteral> = new Subject();
ngOnInit() {
this.subject.pipe(debounceTime(300)).subscribe(details => {
this.lat = details.lat;
this.lng = details.lng;
});
}
centerChange(code) {
this.subject.next(code);
}
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加