Angular-未定义Google吗? [英] Angular - Google is not defined?
问题描述
我正在尝试在angular中实现google maps api.在angularjs中这非常简单，但是我无法弄清楚什么不起作用.我有一个简单的应用程序，可以显示产品及其位置.单击位置后，该位置确实会显示在地图上.但是要购物地图，我正在使用google maps.我已经做了很多.但是这个错误不断出现.
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>
推荐答案
在加载Google Maps脚本之前，您必须等待视图初始化.您可以使用AfterViewInit钩子来完成此操作，如下所示:
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);
}
这篇关于Angular-未定义Google吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
