Question

对我进行地理编码后，我无法在标记上居中放置Google地图。

我有两个标记：初始标记（位于中心的一个不变），另一个基于地理编码而变化，并且在进行地理编码后，每次都将其居中。

我的代码： TS

  zoom = 10;

  addressData: FormGroup;
  submitted = false;
  success = false;

  lat: number;
  lng: number;

  userLat: number;
  userLng: number;

  currentCenter = { lat: null, lng: null };

  private geoCoder: google.maps.Geocoder;

  @ViewChild('googleMap') googleMap: AgmMap;

  constructor(private maps: MapsAPILoader, private bulider: FormBuilder) { }

  ngOnInit() {
    this.addressData = this.bulider.group({
      address: ["", Validators.required],
    });

    this.maps.load().then(() => {
      this.geoCoder = new google.maps.Geocoder();
    });
  }

  getAddress() {

    this.submitted = true;

    if (this.addressData.invalid) {
      return;
    }

    this.success = true;



 this.googleMap.mapReady.subscribe(map => {

// Need to use two parameters in order to use Geocoder
      this.geoCoder.geocode(this.addressData.controls['address'].value, (results, status) => {
    if (status === google.maps.GeocoderStatus.OK) {
      this.userLat = results[0].geometry.location.lat();
      this.userLng = results[0].geometry.location.lng();
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }

  }).then(place => {
    this.currentCenter = { lat: place.geometry.location.lat(), lng: place.geometry.location.lng() };
  }).catch(err => {
    console.log("Error: " + err);
  });
});
    this.submitted = false;
  }

HTML

    <!-- Google maps, the starting latitude & longitude -->
  <agm-map [latitude]="currentCenter.lat" [longitude]="currentCenter.lng" [zoom]="zoom" [mapTypeControl]='true'
    #googleMap>
    <!-- Static marker -->
    <agm-marker [latitude]="defaultCenter.lat" [longitude]="defaultCenter.lng"></agm-marker>

    <!-- User geolocation marker, changes -->
    <agm-marker [latitude]="currentCenter.userLat" [longitude]="currentCenter.userLng"></agm-marker>
  </agm-map>

预期：

进行地理编码后，地图应每隔次从给定地址开始以标记为中心。

实际：

Geocoder可以找到地址，但不会根据该地址将地图放在所放置的标记的中心。

更新

我不能使用Vadim的代码，因为编译器告诉我Geocode需要两个参数，但是Vadim的代码只有一个参数。我无法使用此代码。另外，如果我添加第二个参数，那么它将说then不存在。

this.googleMap.mapReady.subscribe(map => {
  // This line needs two parameters not one
this.geoCoder.geocode(this.addressData.controls['address'].value).then(place => {
        this.currentCenter = { lat: place.geometry.location.lat(), lng: place.geometry.location.lng() };
      }).catch(err => {
        console.log("Error: " + err);
      });
    });

Answer 1

尝试使用this.ref.detectChanges()并看看此example

Answer 2

根据文档，triggerResize()方法

使用当前的lat / lng值或fitBounds值调用以更新地图

https://angular-maps.com/api-docs/agm-core/components/agmmap#triggerResize

但是，由于您将属性绑定到initLat和initLng，因此您不更新地图的经度/纬度。 <agm-map [latitude]="initLat" [longitude]="initLng" [zoom]="zoom">

您需要更新 map 坐标才能更新到triggerResize()。注意将模板绑定到类中的正确属性。在您显示的userLat和userLng的ts片段中，因此您的地理位置标记也有问题。

更新的模板：

<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [mapTypeControl]='true'>
<!-- Static marker -->
<agm-marker [latitude]="initLat" [longitude]="initLng"></agm-marker>

<!-- User geolocation marker, changes -->
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>

您可能需要将lat和lng初始化为ts文件中的某个值。

Answer 3

无需使用Google Maps API或调用Map组件triggerResize方法来更新地图中心，可以考虑以下方法：

a）加载地图后，将地图中心设置为默认值

<agm-map
  [latitude]="currentCenter.lat"
  [longitude]="currentCenter.lng"
  [zoom]="zoom"
  [mapTypeControl]="true"
>
  <!-- Static marker -->
  <agm-marker
    [latitude]="defaultCenter.lat"
    [longitude]="defaultCenter.lng"
  ></agm-marker>

  <!-- User geolocation marker, changes -->
  <agm-marker
    [latitude]="currentCenter.lat"
    [longitude]="currentCenter.lng"
  ></agm-marker>
</agm-map>

为此，引入了两个属性：

currentCenter-当前地图中心
defaultCenter-默认（原始）地图中心

b）地址解析后，像这样更新地图中心：

ngOnInit() {
    this.agmMap.mapReady.subscribe(map => {
      this.geocode("New York, USA").then(place => {
        this.currentCenter = { lat: place.geometry.location.lat(), lng: place.geometry.location.lng()};
      })
      .catch(err => {
        console.log(err);
      });
    });
 }

示例

declare var google: any;

import { Component, ViewChild, OnInit} from "@angular/core";
import { AgmMap } from "@agm/core";

@Component({
  selector: "app-map",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  constructor() {}

  defaultCenter = {lat: 55.5815245, lng: 36.8251383};
  currentCenter = Object.assign({}, this.defaultCenter);
  zoom = 3;

  @ViewChild(AgmMap) agmMap;

  ngOnInit() {
    this.agmMap.mapReady.subscribe(map => {
      this.geocode("New York, USA").then(place => {
        this.currentCenter = { lat: place.geometry.location.lat(), lng: place.geometry.location.lng()};
      })
      .catch(err => {
        console.log(err);
      });
    });
  }

  geocode(address: string): Promise<any> {
    const geocoder = new google.maps.Geocoder();
    return new Promise((resolve, reject) => {
      geocoder.geocode(
        {
          address: address
        },
        (results, status) => {
          if (status === google.maps.GeocoderStatus.OK) {
            resolve(results[0]);
          } else {
            reject(new Error(status));
          }
        }
      );
    });
  }
}

更新

从输入元素获取地址：

<input [(ngModel)]="addressText">
<button (click)="findPlace()">Find a place</button>


findPlace() {
    this.geocode(this.addressText).then(place => {
      this.currentCenter = { lat: place.geometry.location.lat(), lng: place.geometry.location.lng()};
    })
    .catch(err => {
      console.log(err);
    });
}

Answer 4

解析数字将解决分配后端的新值时的问题

setLatLongValue(lat,long) {
    this.lat = Number(lat);
    this.lng = Number(long);    
  }

请点击链接以获取完整的示例Angular – Recenter Angular Google Maps ( AGM )

如何设置地图以标记为中心？ -角度谷歌地图

4 个答案: