Question

我有两个与Angular Google地图（AGM）相关的问题

当我把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);
  });

}

我刚刚复制了地图所需的部分，但如果您需要任何其他代码，请注释，我将粘贴。

第二个问题：

如何将经度和纬度变量更改为用户在自动完成输入部分中输入位置或移动标记时放置的动态值，只是为了能够发布由用户访问Web服务API。

如果您愿意，可以随意打开Web服务并进行测试，表单中的任何其他内容都可以正常工作，我只需要坐标。

Answer 1

你在这里提到了2个问题

1.Google地图隐身

您必须触发一个resize事件才能看到地图。

@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;
}

角度Google地图未加载且未动态发布到网络服务

1 个答案: