Angular 谷歌地图 api 用于 Angular 项目答案

【问题标题】：Angular google maps api for angular projectAngular 谷歌地图 api 用于 Angular 项目
【发布时间】：2021-08-06 14:32:16
【问题描述】：

我已经在我的项目中集成了角度谷歌地图，并且能够通过参考以下教程来显示地图， https://angular-maps.com/guides/getting-started/,

这里我们尝试在 HTML 中添加 agm-map 并加载地图，

我想在我的 .ts 文件中获取 agm-map 对象。

我们怎样才能得到它？尝试了所有可能性，例如向 agm-map 标签添加 id 属性，但对我不起作用。

建议我任何新想法。提前感谢您的帮助。

【问题讨论】：

标签： angular typescript angular-google-maps

【解决方案1】：

只需使用import { AgmMap } from '@agm/core'; 从@agm/core 导入即可。

然后您可以像使用任何其他对象一样使用它。

import { Component, ElementRef } from '@angular/core';
import { AgmMap, GoogleMapsAPIWrapper } from '@agm/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
})
export class AppComponent {
  title: string = 'My first AGM project';
  lat: number = 51.678418;
  lng: number = 7.809007;
  // declaration
  map: AgmMap;

  // ElementRef and GoogleMapsAPIWrapper are params in
  // AgmMap's constructor.
  constructor (el: ElementRef, api: GoogleMapsAPIWrapper) {
    // init
    this.map = new AgmMap(el, api);
    // example properties, there are lots more
    this.map.backgroundColor = 'red';
    this.map.scrollwheel = true;
    this.map.draggable = true;
  }
}

请参阅AgmMap here 的 API 文档。

编辑：响应“向 AgmMap 添加高度”。

在对应的app.component.css 文件中为agm-map 元素添加一个高度。

agm-map {
  height: 300px;
}

【讨论】：

如何为agmMap添加高度？
在相应的 CSS 文件中为 agm-map 元素添加高度（更新答案）。
不起作用。构造函数需要this.map = new AgmMap(el, api) 的附加参数。 _platformId: Object, _fitBoundsService: FitBoundsService, _zone: NgZone)。从哪里得到这一切？干什么用的？

【解决方案2】：

npm install --save @types/googlemaps

声明 const google: any;

【讨论】：

【解决方案3】：

您可以按照以下步骤将谷歌地图集成到 Angular 中

package.json 文件的依赖项

"@agm/core": "^1.1.0",

然后在您的 app.module.ts 中的 imports 数组中，您需要在下面导入

import { AgmCoreModule } from '@agm/core'; // import this and add below to imports array

AgmCoreModule.forRoot({
    apiKey: 'your_api_key',
    libraries: ['places', 'geometry']
})

在您要显示谷歌地图的 component.ts 文件中的下一个

import { AgmMap, MapsAPILoader } from "@agm/core";
declare const google: any;
const place = null as google.maps.places.PlaceResult;


export class MapComponent implements OnInit {

    public searchElementRef: ElementRef;
    lat = 40.16206;
    lng = -96.422414;
    @ViewChild("AgmMap") agmMap: AgmMap;

    constructor(
        private mapsAPILoader: MapsAPILoader,

    ) {
        this.mapsAPILoader.load().then(() => {
            this.autocompleteService = new google.maps.places.AutocompleteService();
        });

    }

    ngOnInit() {


        this.mapsAPILoader.load().then(() => {
            let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
                types: 'address'
            });
            autocomplete.addListener("place_changed", () => {
                this.ngZone.run(() => {
                    //get the place result
                    let place: google.maps.places.PlaceResult = autocomplete.getPlace();
                    //verify result
                    if (place.geometry === undefined || place.geometry === null) {
                        return;
                    }
                    let latitude = place.geometry.location.lat();
                    let longitude = place.geometry.location.lng();
                });
            });
        });

    }
}

组件 HTML 文件

        <label for = "City" > Location Name</label>
        < input autocomplete = "off" placeholder = "Location Name" formControlName = "name"
        autocorrect = "off" autocapitalize = "off" spellcheck = "off" type = "text"
        class="form-control" #search >

        <agm-map style = "width:100%;height:100%"[latitude] = "latitude"
        [longitude] = "longitude"[zoom] = "zoom" >
                <agm-marker[latitude]="latitude"[longitude] = "longitude" > </agm-marker>
        < /agm-map>

【讨论】：