Usm*_*bal 5 javascript google-maps angular
你好我想实现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>
您必须等待视图初始化，然后才能加载Google Maps脚本。您可以使用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);
}
| 归档时间： |
|
| 查看次数： |
7531 次 |
| 最近记录： |