时间戳

首页 > 解决方案 > 可以在 Angular 5 中发出 http get 请求之前发生 Google Map API 调用

javascript - 可以在 Angular 5 中发出 http get 请求之前发生 Google Map API 调用

问题描述

我正在尝试使用 URL 参数来执行 GET 请求，然后使用 JSON 输出来支持对 Google Maps 的查询。到目前为止，我已经弄清楚了如何通过清理和传递静态数据来使嵌入式地图工作。但是，在构建 URL 后完成对查询的调用，因此结果为“未定义”。

@Component({
  selector: 'app-contactdetail',
  templateUrl: './contactdetail.component.html',
  styleUrls: ['./contactdetail.component.css']
})
export class ContactdetailComponent implements OnInit {
  contactId: string;
  contactDetail: Object = { };
  lat: string;
  lng: string;
  queryBuilder = `&q=${this.lat},${this.lng}`;
  apiLink = `https://www.google.com/maps/embed/v1/place?key=`;
   // `&q=321+Fake+Street,Mouton+ME`
  apiKey = `lol`;
  builtLink = `${this.apiLink}${this.apiKey}${this.queryBuilder}`;
  url: string = this.builtLink;
  urlSafe: SafeResourceUrl = 
this.sanitizer.bypassSecurityTrustResourceUrl(this.url);;

  constructor(private route: ActivatedRoute,
              private http: Http,
              private sanitizer: DomSanitizer
             ) {}

  ngOnInit() {
    this.contactId = this.route.snapshot.params.id;
    this.getContactDetail(this.contactId);
    console.log(this.urlSafe);
    console.log(this.builtLink);
  }
  // TODO: make this pass in an option eventually.

  /*   buildQuery(){
    const address = `&q=${this.contactDetail.address.split(' 
').join('+')},`;
    const city = ``
  } */

  async buildURL(url) {
    const sanitized = 
this.sanitizer.bypassSecurityTrustResourceUrl(url);
    return sanitized;
  }

  async getContactDetail(contactId) {
    return this.http
      .request(`http://localhost:3000/contacts/${contactId}`)
      .subscribe((res: any) => {
        this.contactDetail = res.json();
        if (this.contactDetail.hasOwnProperty('geoLocation_lat')) {
          this.lat = this.contactDetail['geoLocation_lat'];
          console.log(this.lat);
        }
        if (this.contactDetail.hasOwnProperty('geoLocation_lng')) {
          this.lng = this.contactDetail['geoLocation_lng'];
          console.log(this.lng);
        }
        console.log(this.contactDetail);
      });
  }
}

以及我正在尝试的 HTML 代码：

</div>
    <iframe
      width="600"
      height="450"
      frameborder="0"
      style="border:0"
      [src]="urlSafe">
    </iframe>
  </div>

我对 Web Dev 非常陌生，因此我们将不胜感激。谢谢你。

标签： javascriptangulargoogle-mapstypescript

解决方案

我没有看到谷歌地图查询是如何被触发的，但只要在 .getContactDetails 完成后正确触发，那么在我看来你需要在订阅中定义 URL。换句话说，

queryBuilder = `&q=${this.lat},${this.lng}`;
apiLink = `https://www.google.com/maps/embed/v1/place?key=`;
// `&q=321+Fake+Street,Mouton+ME`
apiKey = `lol`;
builtLink = `${this.apiLink}${this.apiKey}${this.queryBuilder}`;

不是动态的。它只是使用当前定义的 .lat 和 .lng 值，这些值是未定义的。

更改.getContactDetail为

async getContactDetail(contactId) {
    // ...http request
    .subscribe(res => {
        // ...parse .lat and .lng; handle parsing errors
        this.queryBuilder = `&q=${this.lat},${this.lng}`;
        this.apiLink = `https://www.google.com/maps/embed/v1/place?key=`;
        this.builtLink = `${this.apiLink}${this.apiKey}${this.queryBuilder}`;
    });
}

您应该正确构建 URL。

推荐阅读