2017-04-22 12 views
-1

私のオブジェクトPolygonExtendから、showやhideのような内部アクションをトリガーできます。これらのアクションはうまくいくようです。しかし、クリックイベント(google.maps.event.addDomListener)内で同じアクションを実行すると、 "TypeError:this.name is undefined"が表示されます。どうすればそれを稼働させることができますか? (すでにこのソリューションを試していない場合)クリックイベント内でオブジェクト関数を呼び出すと、定義されていない

jsFiddle here

var mapOptions = { 
     center: new google.maps.LatLng(4.7102000, -74.0308118), 
     zoom: 18, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

var map = new google.maps.Map(document.getElementById('map'), mapOptions); 
var coords = [ 
    {lat: 4.711177836295898, lng: -74.03219819068909}, 
    {lat: 4.710354506576612, lng: -74.03219819068909}, 
    {lat: 4.710354506576612, lng: -74.03176367282867}, 
    {lat: 4.711177836295898, lng: -74.03176367282867} 
]; 

function PolygonExtend(name, path) { 
     //this.name = name; 
     this.path = path; 
     this.name = new google.maps.Polygon({ 
       path: this.path, 
     }); 

     this.show = function() { 
      this.name.setMap(map); 
     }; 
     this.hide = function() { 
      this.name.setMap(null); 
     }; 

     return this.name.setMap(map); // makes Polygon show when instantiated 
} 

a = new PolygonExtend('a', coords); // works and renders Polygon 

a.hide(); // works, hides Polygon 
a.show(); // works, makes Polygon visible again 

var btn = document.getElementById('btn'); 
google.maps.event.addDomListener(btn, 'click', a.hide); // TypeError: this.name is undefined 
+0

「この」キーワードは、ウィンドウオブジェクトにバインドされています。 'this'のインスタンスを変数に保存してthis.hideから参照する必要があります。 – codemax

答えて

0

これを行います。コードの無駄のように思えるが、これを見て:あなたはgooge.maps.event.addDomListenerにa.hide渡すとき

function PointlessPolygon(map, coords){ 
    var t = this; 
    this.map = map; this.coords = coords; this.showing = true; 
    this.polygon = new google.maps.Polygon({paths:t.coords}); 
    this.show = function(){ 
    this.polygon.setMap(map); this.showing = true; 
    }; 
    this.hide = function(){ 
    this.polygon.setMap(); this.showing = false; 
    } 
    this.polygon.setMap(map); // makes Polygon show when instantiated 
} 
var pp = new PointlessPolygon(map, coords); 
var btn = document.getElementById('btn'); 
btn.addEventListener('click', function(){ 
    pp.showing ? pp.hide() : pp.show(); 
}); 

https://jsfiddle.net/evb4kmhw/2/

+0

これは今や受け入れられた答えになるはずです。 – PHPglue

3

上記のコメントで述べたように、私はあなたが何をしようとしてわからない

function PolygonExtend(name, path) { 
    //this.name = name; 

    var self = this; 
    this.name = new google.maps.Polygon({ 
      path: path, 
    }); 


    this.show = function() { 
     self.name.setMap(map); 
    }; 

    this.hide = function() { 
     self.name.setMap(null); 
    }; 

    return this.name.setMap(map); // makes Polygon show when instantiated 
} 
+0

この回答に同意する必要があります。 –

+0

オブジェクトの 'this'はObjectを参照します。実際の場合、 'self'の使用は意味がありません。これはメソッド内の' this'がインスタンスを参照するためです。 – PHPglue

+0

OPの他のコードがうんざりしていない場合、これでうまくいくはずです。しかし、 'this.path'が動的に変更される場合は、' this.path = path'と 'paths:self.path'を' Polygon'に入れたいかもしれません。 – PHPglue

関連する問題