要在Angular中自定义Google地图的HTML信息窗口,可以按照以下步骤进行:
npm install @agm/core
import { AgmCoreModule } from '@agm/core';
@NgModule({
imports: [
AgmCoreModule.forRoot({
apiKey: 'YOUR_API_KEY'
})
],
...
})
export class AppModule { }
agm-map
指令的元素,该指令将用于显示Google地图。在agm-map
元素内部,添加一个带有agm-marker
指令的元素,该指令将用于显示地图上的标记点。同时,在agm-marker
元素内部,添加一个带有agm-info-window
指令的元素,该指令将用于显示自定义的HTML信息窗口。示例代码如下:
Custom Info Window
This is a custom info window.
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;
}
agm-info-window div {
background-color: #fff;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
完成以上步骤后,运行Angular应用程序,将会看到一个带有自定义HTML信息窗口的Google地图。信息窗口中的内容可以根据需要进行修改和扩展。
下一篇:Angular规范组件未找到