3

Googleマップのオートコンプリート機能用にngMapモジュールを実装しながら、ES6でAngularJSを使用しています。

/* html file */
  Enter an address: <br/>
<input places-auto-complete size=80
       ng-model="$ctrl.address"
       component-restrictions="{country:'in'}"
       on-place-changed="$ctrl.placeChanged()"/> <br/>
<div ng-show="$ctrl.place">
  Address = {{$ctrl.place.formatted_address}} <br/>
  Location: {{$ctrl.place.geometry.location}}<br/>
</div>
address : {{$ctrl.address}}
<ng-map></ng-map>

そして、コンポーネントを含むjavascriptファイル

'use strict';
(function() {

class RateRestaurantsController {
constructor(NgMap) {
  this.NgMap = NgMap;
  this.types = "";
  this.place = "";
  this.address = "";
  this.map = {};


}

$onInit() {

  this.NgMap.getMap().then((map)=> {
    this.map = map;
  });
}

placeChanged(){
 console.log(this); // This refers the [Object] returned by google map api; not to the the constructor(as shown in the image)
  this.place = this.getPlace();
  this.map.setCenter(this.place.geometry.location);

  }

 }

angular.module('gmHotelRatingApp.rateRestaurants')
.component('rateRestaurants', {
  templateUrl: 'app/rate-restaurants/rate.restaurants.html',
  controller: RateRestaurantsController
});

})();

返されるオブジェクト: 「この」コンテキストを示す画像。これにより、「this.map」が未定義になります

「this.map」と「this.place」のコンストラクタ プロパティへの参照と「this.getPlaced()」でオート コンプリート データをフェッチする必要があります。どうすればこの問題を解決できますか?

4

1 に答える 1

2

私の解決策は次のとおりです。

constructor(NgMap) {

  this.ngMap = NgMap;

  var controller = this;
  this.ngMap.getMap().then((map) => {
      this.map = map;
  });

  this.myCallback = function () {
     controller.place = this.getPlace();
     controller.map.setCenter(controller.place.geometry.location);
  }


}

関数はコンストラクターの外にある必要があることは知っていますが、それは私にとってはうまくいきます。

于 2016-11-04T10:00:33.073 に答える