2017-03-03 18 views
0

私はtypescriptで初心者です。 locateMe()からメソッドdrawMarker()を呼び出そうとすると、問題が発生します。 私は、問題は、私は.on( 'locationfound'、機能(電子内からdrawMarkerを呼んだということだと思う:任意の){}関数内からメソッドを呼び出せません

例外:this.drawMarkerはdrawMarkerが動作する機能

ないが、 boutton locateMeと私のHTML入力

drawMarker(item: any, elementId: any) { 
    if (elementId === 'inpStartWayPoint') { 
     if (typeof(this.startMarker) === 'undefined') { 
      this.startMarker = L.marker([parseFloat(item.lat), parseFloat(item.lon)]); 
      this.map.addLayer(this.startMarker); 
      this.startMarker.bindPopup('Départ').openPopup(); 
     } else { 
      this.startMarker.setLatLng(([parseFloat(item.lat), parseFloat(item.lon)])); 
     } 
     //this.map.removeLayer(this.startMarker); 


    } else if (elementId === 'inpEndWayPoint') { 
     if (typeof(this.endMarker) === 'undefined') { 
      this.endMarker = L.marker([parseFloat(item.lat), parseFloat(item.lon)]); 
      this.map.addLayer(this.endMarker); 
      this.endMarker.bindPopup('Arrivée').openPopup(); 
     } else { 
      this.endMarker.setLatLng(([parseFloat(item.lat), parseFloat(item.lon)])); 
     } 

    } else if (elementId === 'locateMyPosition') { 

     if (typeof(this.geoLocateMarker) === 'undefined') { 
      this.geoLocateMarker = L.marker([item.latitude, item.longitude]); 

      this.map.addLayer(this.geoLocateMarker); 
      this.geoLocateMarker.bindPopup('Votre Position').openPopup(); 
     } else { 
      this.geoLocateMarker.setLatLng([item.latitude, item.longitude]); 
     } 

    } 

} 
locateMe(elementId: any) { 
    this.map.locate({ 
      setView: true, 
      watch: true 
     }) /* This will return map so you can do chaining */ 
     .on('locationfound', function(e: any) { 
      // var marker = L.marker([e.latitude, e.longitude]).bindPopup('Your are here :)'); 
      var circle = L.circle([e.latitude, e.longitude], e.accuracy/2, { 
       weight: 1, 
       color: 'blue', 
       fillColor: '#ca08c9', 
       fillOpacity: 0.2 
      }); 
      console.log([e.latitude]); 
      this.drawMarker(e, elementId); 
      //this.map.addLayer(marker); 
      this.map.addLayer(circle); 
     }) 
     .on('locationerror', function(e: any) { 
      console.log(e); 
      alert("Location access denied."); 
     }); 
} 

私はsucessefully他の方法から私のコンポーネントクラスの内部

私の2つの方法がそれを呼ばれます

<div class="form-group input-group"> 
      <span class="input-group-addon"><button type="button" id="locateMyPosition" title='Locate Me !' 
                (click)="locateMe('locateMyPosition')"><i 
       class="fa fa-map-marker"></i></button></span> 

      <input type="text" class="form-control" placeholder="Départ" value="" id="inpStartWayPoint"> 
      <span class="input-group-btn"><button class="btn btn-secondary" type="button" 
                (click)="adressAutoComplete('inpStartWayPoint')"><i 
       class="fa fa-search"></i></button></span> 

      </div> 

私に与えることができる任意の助けをありがとうございます!

+0

「これ」。 – Saravana

答えて

1

thisfunction内のコンテキストを変更し、代わりに矢印の機能を使用してみてください、それはthisコンテキストを保持します。

このような何か:[この(ほら)](https://github.com/Microsoft/TypeScript/wiki/'this'-in-TypeScript)が持つ問題について便利になるかもしれません

this.map.locate({ setView: true, watch: true })  .on('locationfound', (e: any) => { // using arrow function here 
    var circle = L.circle([e.latitude, e.longitude], e.accuracy/2, { 
     weight: 1, 
     color: 'blue', 
     fillColor: '#ca08c9', 
     fillOpacity: 0.2 
    }); 
    console.log([e.latitude]); 
    this.drawMarker(e, elementId); 
    this.map.addLayer(circle); 
    }) 
    .on('locationerror', (e: any) => { 
    console.log(e); 
    alert("Location access denied."); 
    }); 
+0

ありがとうございます:) – Uness

2

thisにあなたの参照を保持するためにラムダを使用します。

.on('locationfound', (e: any) => { 
    ... 
} 
+0

素晴らしい作品ありがとう^^ – Uness

関連する問題