Angular 2中可以通过以下步骤在多个组件中使用Google地图:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
请将YOUR_API_KEY替换为你自己的Google地图API密钥。
<div id="map"></div>
import { Component, ViewChild, ElementRef } from '@angular/core';
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.css']
})
export class MapComponent {
@ViewChild('map', {static: true}) mapElement: ElementRef;
map: google.maps.Map;
ngAfterViewInit() {
this.map = new google.maps.Map(this.mapElement.nativeElement, {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
}
在上面的代码中,我们使用ViewChild装饰器获取了对地图容器元素的引用,并在ngAfterViewInit生命周期钩子函数中创建了一个新的Google地图实例,并将其绑定到地图容器元素上。
<app-map></app-map>
这样,你就可以在多个组件中使用Google地图了。每个组件都会有自己独立的地图实例,并且可以根据需要进行自定义配置和操作。
推荐的腾讯云相关产品:腾讯云地图服务(https://cloud.tencent.com/product/maps)
领取专属 10元无门槛券
手把手带您无忧上云