Question

我有一个mongoose架构，其中包含google地图中标记的lat和long。

我获取信息很好，我可以使用angular2显示存储在html模板中的内容，以便信息到达。但是，我想要做的是循环返回的回调数组，并使用lat和long值将标记添加到地图中。

我认为在弄乱组件之后我的逻辑是正确的，但现在我不知道如何将坐标输入代码来设置标记。

有没有人知道如何使用打字稿正确地解决这个问题？

当我在回调之后执行商店的控制台日志时，它是未定义的，

当我将长度记录为0但是这让我感到困惑，因为数据出现在带有角度的html中，当我在mongo shell中找到它时它就在那里。

export class MapsComponent implements OnInit {
   stores: Store[] = [];

   constructor(private storeService: StoreService) {}

   ngOnInit() {

        this.storeService.getStores()
            .subscribe(
                stores => this.stores = stores,
                error => console.error(error)
            );
            console.log(stores);

        var ireLatLng = {lat: 53.1424, lng: -7.6921};   
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
          center: ireLatLng
        });

        stores.forEach(onAddMarker(stores.firstName,stores.lat,stores.long) {
            console.log(stores.firstName + "added");
        });

   }

   onAddMarker(name: string,lt: string,ln: string) {
            var myLatLng = {lat: lt, lng: ln};
            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                title: name,
            });
   }

}

Answer 1

首先，如果输出

console.log(stores);

是空的，这是因为你是异步检索mongo结果。您应该在实际收到标记时尝试创建标记。

其次，即使您有一个商店数组，在onAddMarker方法中，您也无法访问方法map中声明的本地变量ngOnInit，因此您要么通过它作为onAddMarker 的参数或将其声明为实例属性。

第三，latLngLiteral对象应该将数字作为其值，而不是字符串。

总而言之，您的ngOnInit方法看起来应该是

ngOnInit() {

   var ireLatLng = {lat: 53.1424, lng: -7.6921};   
   this.map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
          center: ireLatLng
   });

    this.storeService.getStores()
       .subscribe(
           stores => {
               this.stores = stores;
               console.log(stores);

               stores.forEach(store => {
                  onAddMarker(store.firstName, store.lat, store.long);
                  console.log(store.firstName + "added");
               }
           },
           error => console.error(error)
    );
}

您的onAddMarker方法应该是

onAddMarker(name: string,lt: string,ln: string) {
            var myLatLng = {lat: 1*lt, lng: 1*ln},
                map = this.map,
                marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    title: name,
                });
}

在浏览谷歌地图的mongo标记坐标时遇到问题

1 个答案: