显示存储在db中的地址的位置

时间:2018-06-02 19:13:40

标签: angular google-maps angular5

让我简要解释一下我的想法。我有包含2页的模块。 一个用于创建新公司,另一个用于预览公司信息+编辑公司信息。

一切正常。现在,当我点击其中一家公司的表格时,它会打开“edit / IDOFORGANIZATIONHERE”并显示所点击组织(公司)的所有信息。

现在我需要实施谷歌地图功能,以根据公司的地址,城市,邮政编码和国家/地区显示公司的位置。

我已成功实施Google地图。

   this.gMapsService.getLatLan('London' )
          .subscribe(
            result => {
                this.__zone.run(() => {
                    this.lat = result.lat();
                    this.lng = result.lng();
                })
            },
            error => console.log(error),
            () => console.log('Geocoding completed!')
          );

在我的gMapsService中,我有以下

  import { Injectable, NgZone } from '@angular/core';
    import { GoogleMapsAPIWrapper } from '@agm/core';
    import { MapsAPILoader } from '@agm/core';
    import { Observable, Observer } from 'rxjs';
    import {} from '@types/googlemaps';

    declare var google: any;

    @Injectable()
    export class GMapsService extends GoogleMapsAPIWrapper{ 
        constructor(private __loader: MapsAPILoader, private __zone: NgZone) {
            super(__loader, __zone);
        }

        getLatLan(address) {
            console.log('Getting Address - ', address);
            let geocoder = new google.maps.Geocoder();
            return Observable.create(observer => {
                geocoder.geocode( { 'address': address}, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        observer.next(results[0].geometry.location);
                        observer.complete();                    
                    } else {
                        console.log('Error - ', results, ' & Status - ', status);
                        observer.next({});
                        observer.complete();
                    }
                });
            })
        }
    }

现在,如果您看看第一个片段,它将显示谷歌地图,伦敦城市居中,这也很有效。

现在我想将此字符串London更改为公司信息的值,例如

organization.address
organization.city
organization.postalcode
organization.countryname

如果我这样写这个.gMapsService.getLatLan(this.address)或 this.gMapsService.getLatLan(organization.address)代码成功编译但在我的控制台中我可以看到正在传递的地址是“未定义的”。

但是,我的地址在网页的html部分显示正常显示

Address: {{organization ? organization.address : ''}}<br>

我现在想知道如何在需要与函数getLatLan一起传递的字符串中将地址:显示后显示的文本。

我试过制作

let fulladdress = organization.address + organization...bla bla并传递this.fulladdress但仍显示该地址,邮政编码,城市未定义

感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

我已经通过订阅函数中的组织数据来自行修复它,即使它是在ngOnInit(){}中执行的。

非常感谢。