要在Angular应用程序中使用Angular Google Maps库来显示地图信息窗口,您可以按照以下步骤操作:
步骤1:安装Angular Google Maps库
使用以下命令通过npm安装Angular Google Maps库:
npm install @agm/core
步骤2:导入和配置模块
在您的Angular模块中导入AgmCoreModule
并配置它,以便在应用程序中使用Google Maps库。您还需要提供Google Maps API密钥。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AgmCoreModule } from '@agm/core';
@NgModule({
imports: [
BrowserModule,
AgmCoreModule.forRoot({
apiKey: 'YOUR_GOOGLE_MAPS_API_KEY'
})
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
步骤3:在组件中使用地图信息窗口
在您的组件模板中,使用agm-info-window
指令来定义地图信息窗口。您可以使用agm-marker
指令来添加标记,并使用(markerClick)
事件处理程序来打开信息窗口。
Information Window Content
在组件类中,您需要定义lat
,lng
和zoom
属性来设置地图的位置和缩放级别。您还可以定义markerLat
和markerLng
属性来设置标记的位置。
import { Component } from '@angular/core';
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.css']
})
export class MapComponent {
lat = 51.678418;
lng = 7.809007;
zoom = 12;
markerLat = 51.678418;
markerLng = 7.809007;
}
这样,当用户点击标记时,地图信息窗口将打开并显示内容。
请确保替换YOUR_GOOGLE_MAPS_API_KEY
为您自己的Google Maps API密钥。
上一篇:Angular google maps + PlacesService + 无法在结果中获取纬度和经度信息
下一篇:Angular Google Maps - 使用AGM-MAP标签创建地图与使用map = new google.maps.Map()方法之间的区别