可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

Hi I am trying to implement google maps api in angular. It was pretty simple in angularjs but I cant figure out whats not working. I have a simple app which is showing products along with their location. Upon clicking location the location does show on map. But to shop map I am using google maps. I have done quite much. But this error is keep coming.

google is not defined

app.component.ts

    import { Component } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import { ProductService } from './product.service';
declare var google: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [ProductService]
})
export class AppComponent {

  //define an array of products
  products = [];

  //constructor func
  constructor(private _productService: ProductService) { }

  //after constructor func this func runs , in which we are
  // accessing the class function getproducts and objects products
  // through this.
  // => means callback in which we are dumping data in products
  //array
  ngOnInit() {
    this._productService.getProducts()
      .subscribe(products => { this.products = products[0].data; console.log(this.products); })

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

  }

}

Index.html

    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Shopober</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
  <app-root></app-root>
  <script src="https://maps.googleapis.com/maps/api/js?key=xxxxx" async defer>


  </script>
</body>

</html>

app.component.html

 <table id="products">
    <tr>
      <th>Id</th>
      <th>Product Name</th>
      <th>Price</th>
      <th>In Stock</th>
      <th>Location</th>
      <th>Image</th>
    </tr>
    <tr *ngFor="let product of products">
      <td>{{product.id}}</td>
      <td>{{product.product_name}}</td>
      <td>{{product.product_price}}</td>
      <td>{{product.product_stock}}</td>
      <td>
        <a>{{product.location[0].lat + ',' + product.location[0].lng}}</a>
      </td>
      <td>{{product.product_image}}</td>
    </tr>
  </table>

回答1:

You have to wait the view initialization before loading the google maps script. You can do it with the AfterViewInit hook, like this :

import {AfterViewInit, Component} from '@angular/core';
...
export class YourComponent implements AfterViewInit {

  ngAfterViewInit(): void {
    // Load google maps script after view init
    const DSLScript = document.createElement('script');
    DSLScript.src = 'https://maps.googleapis.com/maps/api/js?key=xxxxx'; // replace by your API key
    DSLScript.type = 'text/javascript';
    document.body.appendChild(DSLScript);
    document.body.removeChild(DSLScript);
  }

回答2:

Try wrapping the initialization inside a setTimeout() function like below:

ngOnInit(){
 setTimeout(()=> {
 // Put the logic here 


 }, 1000);
}

回答3:

Trying implementing -

import GoogleMaps from 'google-maps';

After importing google-maps use below code:

GoogleMaps.KEY = <your map api key>;
GoogleMaps.load((google) => {
  // place your code here
});

回答4:

It looks like your components load before the google script. There is a great angular2+ plugin for google maps : https://github.com/SebastianM/angular-google-maps

Did you check it out ? It allows you to do all the common stuff with google maps, and avoid the common loading and other errors.