你好，我正在尝试实施google maps api in angular。这很简单angularjs但我不知道什么不起作用。我有一个简单的应用程序，它显示产品及其位置。单击位置后，该位置会显示在地图上。但我正在使用的购物地图google maps。我已经做了很多了。但这个错误不断出现。
google is not defined
应用程序组件.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
});
}
}
索引.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>
应用程序组件.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>
在加载谷歌地图脚本之前，您必须等待视图初始化。你可以用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);
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
