web-dev-qa-db-fra.com

Comment mettre la carte au centre d'un marqueur? - Angular Google Maps

Je ne peux pas centrer ma carte Google sur un marqueur après avoir géocodé.

J'ai deux marqueurs: le marqueur initial (celui qui est centré sur, ne change pas), l'autre change en fonction du géocodage, et après le géocodage, il sera centré à chaque fois.

Mon code: 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>

Attend:

Après le géocodage, la carte doit être centrée sur le marqueur à partir de l'adresse donnée à chaque fois.

Réel:

Le géocodeur trouve l'adresse mais ne centre pas la carte sur le marqueur placé en fonction de l'adresse.

Mise à jour

Je ne peux pas utiliser le code de Vadim car le compilateur me dit que j'ai besoin de deux arguments pour le Geocode, mais le code de Vadim n'en a qu'un. Je ne peux pas utiliser ce code. De plus, si j'ajoute le deuxième argument, il dira alors que then n'existe pas.

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);
      });
    });
angulargeolocationmarkerangular-google-maps
3
Compiler v2

Selon les documents, la méthode triggerResize()

est appelé avec les valeurs lat/lng ou fitBounds actuelles pour recentrer la carte

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

Cependant, vous ne mettez pas à jour la longitude/latitude de la carte, car vous avez lié la propriété à initLat et initLng. <agm-map [latitude]="initLat" [longitude]="initLng" [zoom]="zoom">

Vous devez mettre à jour les coordonnées de la carte afin de recentrer sur triggerResize(). Veillez à lier votre modèle au bon attribut de votre classe. Dans l'extrait ts que vous avez montré que userLat et userLng ne sont pas présents, votre marqueur géolocalisé sera également problématique.

Modèle mis à jour:

<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>

Vous devrez peut-être initialiser lat et lng à une certaine valeur dans votre fichier ts.

0
Mathieu Léger-Dalcourt