嗨，我正在尝试在angular中实现google maps api。这在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
});
}
}
索引.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>
在加载谷歌地图脚本之前，您必须等待视图初始化。您可以使用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);
}
删除异步和延迟属性对我有用，但不确定记住网站性能方面是否明智。
因此，脚本标记应如下所示：
<script src="https://maps.googleapis.com/maps/api/js?key=xxxxx">
正在尝试实现 -
import GoogleMaps from 'google-maps';
导入谷歌地图后，使用以下代码：
GoogleMaps.KEY = <your map api key>;
GoogleMaps.load((google) => {
// place your code here
});
看起来您的组件在谷歌脚本之前加载。谷歌地图有一个很棒的 angular2+ 插件：https://github.com/SebastianM/angular-google-maps
你检查了吗？它允许您使用谷歌地图做所有常见的事情，并避免常见的加载和其他错误。
其他方式类似的@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)),
);
}
}
尝试将初始化包装在setTimeout()函数中，如下所示：
ngOnInit(){
setTimeout(()=> {
// Put the logic here
}, 1000);
}