Angular中使用最简单的方式实现点击谷歌地图获取经纬度

Angular中使用最简单的方式实现点击谷歌地图获取经纬度

Angular中使用最简单的方式实现点击谷歌地图获取经纬度

第 1 步：创建 Angular 应用程序

通过执行以下命令在终端上执行以下命令以创建新的Angular应用程序：

// 创建项目
ng new google-map-app
// 进入目录
cd angular-google-map-app

第 2 步：安装 agm/core

然后在终端执行以下命令Angular中使用最简单的方式实现点击谷歌地图获取经纬度，通过执行npm命令安装agm依赖包：

npm install @agm/core --save

（agm是angular-google-maps的缩写，github地址，官方文档地址）

打开 .app.json文件，然后 在 types 属性下添加 ：

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [
      "googlemaps"
    ]
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src*.d.ts"
  ]
}

第 3 步：引入 agm/core 模块

下一步把添加到中。

Google API 密钥：需要前往谷歌控制台获取地图密钥。

添加密钥到配置项：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
   
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { AgmCoreModule } from '@agm/core';
   
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    AgmCoreModule.forRoot({
      apiKey: '你的密钥',
      libraries: ['places']
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

其中属性是用来加载所使用到的地图库，例如：

places使您的应用程序能够在定义的区域内搜索地点google map keygoogle map key，例如机构、地理位置或显著的兴趣点。marker允许您向地图添加高度可定制、高性能的高级标记。包括用于计算地球表面标量几何值（例如距离和面积）的效用函数。drawing提供图形界面hao123，供用户在地图上绘制多边形、矩形、折线、圆和标记。

【本文来源于互联网转载，如侵犯您的权益或不适传播，请邮件通知我们删除】