谷歌角度地圖未加載並且不會動態發布到Web服務

Question

我有2個與Angular Google Maps（AGM）有關的問題

地圖來源： https ： //angular-maps.com/

當我將AGM的代碼放在空的HTML頁面（組件頁面）中時

它有效，但是當我將其放入HTML模板中時，它不顯示，自動完成功能正在工作，但地圖未顯示

組件HTML

<fieldset>
          <div style="text-align: center;">
            <p style="font-size: 24px">Enter your address</p>
          </div>

            <!--angular 4 maps-->
            <div class="form-group">
              <input placeholder="search for location" 
autocorrect="off" autocapitalize="on" spellcheck="off" 
type="text" 
class="form-control" #search [formControl]="searchControl">

            </div>

            <agm-map style="height: 300px;"
 [latitude]="latitude" [longitude]="longitude" 
 [scrollwheel]="false" [zoom]="zoom" [gestureHandling]="cooperative">
              <agm-marker [markerDraggable]="true" 
 (dragEnd)="markerMoved($event)" [latitude]="latitude" 
 [longitude]="longitude"></agm-marker>

            </agm-map>

            <!--angular 4 maps-->

          <input type="button" name="previous" class="previous action-
 button-previous" value="Previous"/>
          <input type="button" name="next" class="next action-button" 
value="Next"/>
        </fieldset>

組件TS：

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
import {Observable} from 'rxjs/Observable';
import { HttpClient, HttpErrorResponse, HttpClientModule } from 
'@angular/common/http';
import {NgForm} from '@angular/forms';
import { AgmCoreModule, MapsAPILoader } from '@agm/core';
import { ElementRef, NgModule, NgZone, ViewChild } from 
'@angular/core';
import { FormControl, FormsModule, ReactiveFormsModule } from 
"@angular/forms";
import { AgmMap } from '@agm/core';



declare const google: any;

@Component({
selector: 'app-add-school',
templateUrl: './add-school.component.html',
styleUrls: ['./add-school.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AddSchoolComponent implements OnInit {
public latitude: number;
public longitude: number;
public searchControl: FormControl;
public zoom: number;

@ViewChild("search")
public searchElementRef: ElementRef;
@ViewChild(AgmMap)
public agmMap: AgmMap;
name: any[];
logo: any[];
vision: any[];
mission: any[];
address: any[];
emails: any[] = [];
numbers: any[] = [];
school_id: any[];
district_id: number[] = [];
numbertitle: number;
number: number;
private url = 
'https://crm.easyschools.org/api/en/schools/create/create';
countries: any[] = []; // Blank Array not blank object
cities: any[] = []; // Blank Array not blank object
districts: any[] = []; // Blank Array not blank object
imageFile: any;
schoolyears: any[] = [];
start_date: string;
end_date: string;
name_en: any[] = [];
id: number[] = [];
type_id: number[] = [];

constructor(private _http: HttpClient, private mapsAPILoader: 
MapsAPILoader, private ngZone: NgZone) { 
this.getMyBlog();
this.educationType();
}
ngOnInit() {
// this.agmMap.triggerResize();

 // set google maps defaults
this.zoom = 17;
this.latitude = 1500;
this.longitude = 98.5795;

 // create search FormControl
this.searchControl = new FormControl();

 // set current position
this.setCurrentPosition();

 // load Places Autocomplete
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;
      }

       // set latitude, longitude and zoom
      this.latitude = place.geometry.location.lat();
      this.longitude = place.geometry.location.lng();
      this.zoom = 12;
    });
  });
});
}

 onSubmit(form: NgForm) {
var data = form.value;
let formData: FormData = new FormData();
// debugger;

formData.append('logo', this.imageFile, this.imageFile.name);
formData.append('name', data.name1);
formData.append('vision', data.vision);
formData.append('mission', data.mission);
formData.append('address', data.address);
formData.append('latitude', this.latitude);
formData.append('longitude', this.longitude);
// console.log('aaa' + data.districts);
formData.append('district_id', this.district_id);
// formData.append('school_id', 1);
formData.append('emails[0][title]', data.title);
formData.append('emails[0][email]', data.email);
formData.append('numbers[0][title]', data.numbertitle);
formData.append('numbers[0][number]', data.number);
formData.append('schoolyears[0][start_date]', data.start_date);
formData.append('schoolyears[0][end_date]', data.end_date );
formData.append( 'schooltypes[0][type_id]', this.type_id );

this._http.post(this.url, formData)
  .subscribe(response => {
    // debugger;
    console.log(response);
  }, (err: HttpErrorResponse) => {
    console.log(err);
  });

}

我只是復制了地圖所需的部分，但是如果您需要任何其他代碼，則只需注釋，然后我將粘貼。

第二個問題：

當用戶在自動完成輸入部分中輸入位置或移動標記時，如何才能將經度和緯度變量更改為用戶輸入的動態值，以便能夠將用戶選擇的正確坐標發布到網絡服務API。

隨意打開Web服務並測試是否需要，表單中的任何其他內容都可以正常運行，我只需要坐標即可。

Answer 1

您在這里提到了2個問題

1，谷歌地圖不可見

您必須觸發一個調整大小事件才能查看地圖。

@ViewChild('map') map: AgmMap; 
resizeMap() {
this.map.triggerResize();
}

並調用帶有超時的resizeMap（）。

setTimeout(() => {
  this.resizeMap();
}, 1000);

2.獲取坐標

您將從(dragEnd)事件獲取坐標。

markerMoved($event) {
  this.lat = $event.coords.lat;
  this.lng = $event.coords.lng;
}