📜  如何使用AngularJS将Google Map和Marker添加到您的应用程序中?

📅  最后修改于: 2021-05-13 20:42:26             🧑  作者: Mango

目的是在Angular应用程序中添加Google Map和Marker。当用户单击地图上的特定位置时,标记将添加到该特定位置。为了达到目标,我们将使用AGM(角度Google Maps)及其组件,使解决方案非常容易。

什么是Angular Google Maps(AGM)?
AngularJS提供了Angular Google Maps组件,用于在应用程序中集成Google Maps服务。 AGM具有可直接在应用程序中使用的组件。

方法和解决方案:使用Angular Google Maps的步骤如下:

  • 使用以下命令将AGM安装到您的本地angular项目。
    npm install @agm/core --save
  • 生成API密钥以使用服务。
    • 转到https://developers.google.com/maps/documentation/javascript/get-api-key,然后按照所有步骤创建API密钥。
    • 确保已启用您的API,要启用您的API,请遵循此链接中的步骤https://support.google.com/googleapi/answer/6158841?hl=zh_CN
  • AgmCoreModule导入您的应用程序
    import { AgmCoreModule } from '@agm/core';

    添加AgmCoreModule.forRoot,您必须在其中将创建的API密钥放入apiKey(apiKey:“此处是您的API密钥”)。

    imports: [
        AgmCoreModule.forRoot({
          apiKey:"your API key here"
        })
    ]
    

    app.module.ts:

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AgmCoreModule } from '@agm/core';
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
      
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        AppRoutingModule,
        AgmCoreModule.forRoot({
          apiKey:"your API Key"
        })
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
    
  • 在HTML文件组件选择器中, agm-map用于引入地图,其中纬度经度绑定到变量latitudelongitude 。点击地图即事件(mapClick)用于传递带有包含点击地图的纬度经度坐标的函数的事件。

    对于标记agm-marker选择器,将相同的纬度和经度绑定到局部变量。
    app.component.html:

    
      
    
    
    
  • 在TypeScript文件中,定义了获取坐标并将其绑定到局部变量的函数,该局部变量用于在单击地图时设置标记。
    app.component.ts:
    import { Component } from '@angular/core';
      
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      latitude=51.678418;
      longitude=7.809007;
      location(x){
        this.latitude=x.coords.lat;
        this.longitude=x.coords.lng;
      }
    }
    

输出:运行开发服务器以获取地图,然后单击地图以将标记添加到所需的位置。