Question

您好我正在尝试在google maps api中实施angular。在angularjs中这很简单，但我无法弄清楚什么不起作用。我有一个简单的应用程序，显示产品及其位置。点击位置后，该位置会在地图上显示。但是到商店地图我正在使用google maps。我做了很多。但是这个错误仍在继续。

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>

Answer 1

在加载google地图脚本之前，您必须等待视图初始化。您可以使用AfterViewInit挂钩执行此操作，如下所示：

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);
  }

Answer 2

尝试将初始化包装在$str = "<h2>Title: " . $title . "</h2>" . "<pre>Publ at: " . $publ_date . "</pre>". "<div>Content: " . $content . "</div>"; echo $str;函数中，如下所示：

setTimeout()

Answer 3

删除 async 和 defer 属性对我有用，但不确定将网站的性能方面考虑在内是明智的。

因此您的脚本标签应如下所示：

<script src="https://maps.googleapis.com/maps/api/js?key=xxxxx">

Answer 4

与@Boulboulouboule解决方案类似的其他方式

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

  constructor(private httpClient: HttpClient) {}

  ngAfterViewInit(): void {
    this.httpClient.jsonp('https://maps.googleapis.com/maps/api/js?key=xxxxx', 
      'callback')
      .pipe(
         map(() => true),
         catchError(() => of(false)),
      );
    }

}

Answer 5

尝试实施 -

import GoogleMaps from 'google-maps';

导入google-maps后，请使用以下代码：

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

Answer 6

看起来您的组件在Google脚本之前加载。谷歌地图有一个很棒的angular2 +插件：https://github.com/SebastianM/angular-google-maps

你看过了吗？它允许您使用谷歌地图完成所有常见的操作，并避免常见的加载和其他错误。

Angular - 谷歌没有定义？

6 个答案: