web-dev-qa-db-ja.com

AngularプレイスIDでプレイスを設定するGoogleマップ用の2つのagmライブラリ

ページにプレイスIDが渡されるGoogleマップを実装しています。次に、そのようなプレイスIDを取得し、そのマーカーを使用してマップをロードする必要があります。私はドキュメントを調べていましたが、場所IDを設定できるように、<agm-map>タグからマップオブジェクトをどのようにターゲットにすることができるかは明確ではありません。以下はコードの一部です。

  public latitude: number;
  public longitude: number;
  public zoom: number;
  public placeid: string;

  constructor(
    private mapsAPILoader: MapsAPILoader,
    private ngZone: NgZone
  ) {}

  ngOnInit() {
      //set google maps defaults
      this.zoom = 4;
      this.latitude = 39.8282;
      this.longitude = -98.5795;
      this.placeid = "ChIJMS2FahDQzRIRcJqX_aUZCAQ";

      //set current position
      this.setCurrentPosition();

      this.mapsAPILoader.load().then(() => {
            //How do i set the agm-map here to load the map with the placeid

      });
    }

    private setCurrentPosition() {
      if ("geolocation" in navigator) {
        navigator.geolocation.getCurrentPosition((position) => {
          this.latitude = position.coords.latitude;
          this.longitude = position.coords.longitude;
          this.zoom = 12;
        });
      }
    }

次に、htmlファイルに次のようなものがあります。

<agm-map [latitude]="latitude" [longitude]="longitude" [scrollwheel]="false" [zoom]="zoom">
      <agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker>
</agm-map>

私はGOOGLEのドキュメントを見て、次のように必要なプレイスIDを設定しているようです

var request = {
  placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4'
};

service = new google.maps.places.PlacesService(map);
service.getDetails(request, callback);

function callback(place, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    createMarker(place);
  }
}

私が抱えている問題は、<agm-map>を使用しているため、mapに何を渡すべきかわからないことです。

angulargoogle-mapstypescriptangular2-google-maps
8
jedgard

agm-mapのmapReady出力プロパティを使用できます。あなたのhtmlをに変更してください

<agm-map [latitude]="latitude" [longitude]="longitude" [scrollwheel]="false" [zoom]="zoom" (mapReady)="mapReady($event)">
      <agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker>
</agm-map>

コンポーネントで次の関数を定義します。この関数は、マップの準備ができると呼び出されます。

mapReady($event: any) { 
  // here $event will be of type google.maps.Map 
  // and you can put your logic here to get lat lng for marker. I have just put a sample code. You can refactor it the way you want.
  this.getLatLong('ChIJN1t_tDeuEmsRUsoyG83frY4', $event, null);
}

getLatLong(placeid: string, map: any, fn) {
    let placeService = new google.maps.places.PlacesService(map);
    placeService.getDetails({
      placeId: placeid
      }, function (result, status) {
        console.log(result.geometry.location.lat());
        console.log(result.geometry.location.lng())
      });
  }

Htmlに渡す緯度と経度のパラメーターに値を設定できるように、必要に応じてこのサンプルコードを変更/リファクタリングしてください。

<agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker>
11
vsoni