gpt4 book ai didi

javascript - 订阅 JS Google map 中的数据

转载 作者:行者123 更新时间:2023-12-02 22:11:17 24 4
gpt4 key购买 nike

我正在尝试在动态脚本中更改 map 的中心。问题是我确实获得了我订阅的数据,但它不会改变 map 的中心。我通过在组件内创建 setInterval() 并在组件外部执行该方法后查看数据是否发生变化来对此进行测试。这是代码示例

https://codesandbox.io/s/joey-basic-gmaps-lw5d4

export class AppComponent implements OnInit, OnChanges {
public markerLat = 39;
public markerLng = -76;
title = "CodeSandbox";
private apiKey = environment.googleMapsAPIkey;

constructor(private data: DataService) {
const dynamicScripts = [
"https://maps.googleapis.com/maps/api/js?key=" + this.apiKey
];
for (var i = 0; i < dynamicScripts.length; i++) {
const node = document.createElement("script");
node.src = dynamicScripts[i];
node.type = "text/javascript";
node.async = true;
node.charset = "utf-8";
document.getElementsByTagName("head")[0].appendChild(node);
}
}
ngOnInit() {
this.data.markerLat.subscribe(markerLat => this.markerLat = markerLat);
this.data.markerLng.subscribe(markerLng => this.markerLng = markerLng);
setTimeout(() => {
this.initMap();
}, 1000);
}
ngOnChanges() {
setTimeout(() => {
this.initMap();
}, 1000);
}
ngOnDestroy() {
this.data.markerLat.subscribe(markerLat => this.markerLat = markerLat).unsubscribe();
this.data.markerLng.subscribe(markerLng => this.markerLng = markerLng).unsubscribe();
}
initMap() {
const google = window.google;

const center = { lat: this.markerLat, lng: this.markerLng };
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 8,
center: center
});
const marker = new google.maps.Marker({ position: center, map: map });
}
}

最佳答案

由于您是从异步源获取数据,因此 initMap 的执行顺序将会有所不同。将 initMap 方法移至 subscribe block 内。使用 forkJoin 获取 lat 和 lng 可观测值,以便首先完成。

试试这个

    import { forkJoin } from 'rxjs';

export class AppComponent implements OnInit, OnChanges {

ngOnInit() {
const latLng = forkJoin(
this.data.markerLat,
this.data.markerLng
).subscribe(([markerLat, markerLng])=>{
this.markerLat = markerLat;
this.markerLng = markerLng;
this.initMap();
})
}
}

关于javascript - 订阅 JS Google map 中的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59549877/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com