您好，我正在尝试在 angular 中实现 google maps api。这在 angularjs 中非常简单，但我无法弄清楚什么不起作用。我有一个简单的应用程序，它显示产品及其位置。单击位置后，该位置会显示在 map 上。但是为了购买 map ，我使用的是 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>
最佳答案
在加载谷歌地图脚本之前，您必须等待 View 初始化。您可以使用 AfterViewInit Hook 来完成此操作，如下所示:
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);
}
关于javascript - Angular - Google 未定义？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47198904/