javascript - Angular 4 谷歌地图集成问题

Question

我正在尝试将谷歌地图集成到 Angular 项目中。纬度-经度信息被注入(inject)到 iframe URL 中。但它没有显示 map ，也没有在控制台中显示任何错误。

这是模板源，

<iframe [src]="sanitizeUrl('https://www.google.com/maps/embed/v1/place?q='+address?.latitude+','+address?.longitude+'&key=my_key')" width="393" height="165" frameborder="0"></iframe>

这是 Angular 代码，

import { Component } from '@angular/core';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-leftblock',
  templateUrl: './leftblock.component.html',
  styleUrls: ['./leftblock.component.scss']
})
export class AppLeftblockComponent {

  address: any;

  constructor(
    private sanitizer: DomSanitizer

    this.address = {
        'latitude': '19.0759837'
        'latitude': '72.87765590000004'
    };

  ) { }

  sanitizeUrl(url) {
    console.log(url);
    this.sanitizer.bypassSecurityTrustUrl(url);
  }

}

Answer 1

首先尝试以下操作。

在构造函数中也使用this.address

constructor(
    private sanitizer: DomSanitizer
  ) { 
      this.address = [
        'latitude' => '19.0759837'
        'latitude' => '72.87765590000004'
    ];
}


sanitizeUrl() {
    const url = 'https://www.google.com/maps/embed/v1/place?q='+this.address.latitude+','+this.address.longitude+'&key=my_key';
    console.log(url);
    this.sanitizer.bypassSecurityTrustUrl(url);
}