Angular Google 地圖教程：快速指南
介紹
當(dāng)我們將光標(biāo)移到標(biāo)記上時(shí)，Google 地圖集成角度允許開發(fā)人員在內(nèi)容窗口中顯示谷歌地圖上的位置和有關(guān)位置的信息。
創(chuàng)建 Angular CLI 項(xiàng)目
運(yùn)行以下命令來安裝 Angular CLI。
npm 安裝-g @angular/cli
執(zhí)行以下命令以使用 Angular CLI 創(chuàng)建一個(gè)新的 Angular 項(xiàng)目：
ng 新的 angular-google-mapscd angular-google-maps
安裝 Angular 谷歌地圖
現(xiàn)在，我們將使用以下命令安裝 AGM，即Angular Google Maps 。
npm 安裝@agm/核心npm i @types/ googlemaps@3.39.13
@NgModule 設(shè)置
您需要從此處獲取 Google Maps API 密鑰才能訪問項(xiàng)目中的地圖。打開 src/app/app.module.ts 并導(dǎo)入 AgmCoreModule。
從'@angular/core'導(dǎo)入{NgModule}；從'@agm/core'導(dǎo)入{AgmCoreModule}；從'@angular/platform-browser'導(dǎo)入{BrowserModule}；
從'./app-routing.module'導(dǎo)入{AppRoutingModule}；從 './app.component' 導(dǎo)入 { AppComponent }；
@NgModule({
聲明：[
應(yīng)用組件
],
進(jìn)口：[
瀏覽器模塊，
應(yīng)用路由模塊，
AgmCoreModule.forRoot({
密鑰：''
})
],
供應(yīng)商：[]，
引導(dǎo)程序：[AppComponent]})導(dǎo)出類 AppModule { }
正在尋找?guī)褪謥砦⒄{(diào) Angular 應(yīng)用程序的性能？
聘請(qǐng) Angular 開發(fā)人員來讓您的最終用戶在實(shí)施最新功能時(shí)感到高興和驚奇。我們可以通過我們的 Angular 升級(jí)服務(wù)幫助您保持最新的框架。
配置應(yīng)用程序組件
現(xiàn)在，在Angular 谷歌地圖教程中繼續(xù)配置應(yīng)用程序組件。在應(yīng)用程序組件中，我們添加了
標(biāo)記數(shù)組
設(shè)置縮放級(jí)別
默認(rèn)經(jīng)緯度
點(diǎn)擊標(biāo)記事件
打開文件src/app/app.component.ts，修改如下圖：
從'@angular/core'導(dǎo)入{組件}；@成分（{
選擇器：'app-root'，
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']})導(dǎo)出類 AppComponent {
// 谷歌地圖縮放級(jí)別
縮放：數(shù)字 = 8；
// 地圖的初始中心位置
緯度：數(shù)字 = 51.673858；
lng: 數(shù)字 = 7.815982;
點(diǎn)擊標(biāo)記（標(biāo)簽：字符串，索引：數(shù)字）{
console.log(`點(diǎn)擊標(biāo)記：${label || index}`)
}
標(biāo)記 = [
{
緯度：51.673858，
液化天然氣：7.815982，
標(biāo)簽：“A”，
可拖動(dòng)：真
},
{
緯度：51.373858，
液化石油氣：7.215982，
標(biāo)簽：“乙”，
可拖動(dòng)：假
},
{
緯度：51.723858，
液化石油氣：7.895982，
標(biāo)簽：“C”，
可拖動(dòng)：真
}
]}
用戶界面
打開文件src/app/app.component.html并粘貼以下內(nèi)容：
<h2>Angular Google 地圖 (AGM) 演示</h2>
<agm地圖
[緯度] =“緯度”
[經(jīng)度]="lng"
[縮放] =“縮放”
[disableDefaultUI]="false" >
<agm-標(biāo)記
*ngFor="let m of markers; let i = index"
(markerClick)="clickedMarker(m.label, i)"
[緯度]="m.lat"
[經(jīng)度]="m.lng"
[標(biāo)簽]="m.標(biāo)簽"
[markerDraggable]="m.draggable">
<agm-info-window>
<strong>標(biāo)簽：{{m.label}}</strong><br/>
<strong>緯度：{{m.lat}}</strong><br/>
<strong>經(jīng)度：{{m.lng}}</strong>
</agm-信息窗口>
</agm-標(biāo)記>
</agm-地圖>
打開文件 src/app/app.component.css 并粘貼以下代碼。
agm地圖{
高度：500px；}
運(yùn)行應(yīng)用程序
在項(xiàng)目根文件夾中使用以下命令運(yùn)行應(yīng)用程序。
npm 開始
然后，在瀏覽器中打開以下 URL：http://localhost:4200
當(dāng)一切按預(yù)期運(yùn)行時(shí)，您應(yīng)該會(huì)看到使用 Angular Google Maps 創(chuàng)建的第一個(gè) Google Map，如下所示。
Github 存儲(chǔ)庫(kù)：Angular Google 地圖
歡迎訪問源代碼：angular-google-maps。您可以克隆 github 存儲(chǔ)庫(kù)并自己試驗(yàn)代碼。
結(jié)論
所以，這就是如何將 Angular Google 地圖集成到您的項(xiàng)目中。我希望本教程對(duì)開始使用 AGM 有所幫助。您可以隨時(shí)與我們分享您的建議或反饋。訪問Angular 教程頁(yè)面以學(xué)習(xí)基本和高級(jí) Angular 知識(shí)，以獲取更多此類教程。每個(gè)教程都將提供一個(gè) github 存儲(chǔ)庫(kù)，以便您可以克隆和使用代碼。Bacancy 擁有技能嫻熟且經(jīng)驗(yàn)豐富的 Angular 開發(fā)人員，他們具有最佳的問題解決能力。如果您有任何疑問或要求，請(qǐng)聯(lián)系我們。