Question

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

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

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

我们怎么能这样做？尝试了所有可能性，比如在agm-map标签中添加id属性，但对我来说不起作用。

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

Answer 1

只需使用@agm/core从import { AgmMap } from '@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添加高度。”

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

agm-map {
  height: 300px;
}

Answer 2

npm install --save @ types / googlemaps

声明const google：任何;

Answer 3

以下是在 angular 中集成谷歌地图的步骤

package.json 文件的依赖

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

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

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>

角度项目的角度谷歌地图api

3 个答案: