web-dev-qa-db-ja.com

マーカーの中心にマップを設定するにはどうすればよいですか？ -Angular Googleマップ

ジオコーディング後、Googleマップをマーカーの中心に配置できません。

私は2つのマーカーを持っています。最初のマーカー（中央にあるマーカーは変化しません）、もう1つのマーカーはジオコーディングに基づいて変化し、ジオコーディング後は毎回中央に表示されます。

私のコード：[〜＃〜] 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>

予想：

ジオコーディング後、マップは指定された住所ごとの時間ごとにマーカーを中心にする必要があります。

実際：

ジオコーダーは住所を検索しますが、住所に基づいて配置されたマーカーの中心にマップを配置しません。

更新

Geocodeには2つの引数が必要であるとコンパイラーから指示されたため、Vadimのコードは使用できませんが、Vadimのコードには1つしかありません。このコードは使用できません。また、2番目の引数を追加すると、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);
      });
    });
angulargeolocationmarkerangular-google-maps
3
Compiler v2

ドキュメントによると、triggerResize()メソッド

現在の緯度/経度の値またはfitBoundsの値で呼び出され、地図を再配置します

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

ただし、プロパティをinitLatおよびinitLngにバインドしたため、マップの経度/緯度は更新しません。 _<agm-map [latitude]="initLat" [longitude]="initLng" [zoom]="zoom">_

map座標を更新して、triggerResize()を再中心化する必要があります。テンプレートをクラスの適切な属性にバインドするように注意してください。示したtsスニペットでは、userLatとuserLngが存在しないため、ジオロケーションされたマーカーにも問題があります。

更新されたテンプレート：

_<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ファイル内のある値に初期化する必要がある場合があります。

0
Mathieu Léger-Dalcourt