TypeScript 'dies.' setzt kein Objekt

Question

Ich benutze Bing Maps v8 um Geocoding zu machen. zuerst war dieser Code nicht in einer Klasse. Ich habe den Code in einer Klasse am Ende hinzufügen, aufgrund dieses Fehlers:

typescript cannot redeclare block-scoped variable 'map' 

Weil ich nun eine Klasse mit Ich habe Probleme mit ‚dem.‘.

/// <reference path="./../scripts/MicrosoftMaps/Microsoft.Maps.d.ts" /> 
/// <reference path="./../scripts/MicrosoftMaps/Modules/Search.d.ts" /> 
/// <reference path="./../scripts/typings/jquery/jquery.d.ts" /> 

class BMGeocode { 

    map: Microsoft.Maps.Map; 
    searchManager: Microsoft.Maps.Search.SearchManager; 

    public loadMap =() => { 
     this.map = new Microsoft.Maps.Map('#map', { 
      credentials: 'xxx', 
      center: new Microsoft.Maps.Location(51.087299, 2.976770), 
      zoom: 10 
     }); 
    } 

    public search =() => { 
     if (!this.searchManager) { 
      Microsoft.Maps.loadModule('Microsoft.Maps.Search', function() { 
       this.searchManager = new Microsoft.Maps.Search.SearchManager(this.map) ; // PROBLEM: searchManager is never set? 
      }); 
     } 

     // remove any previous results from the map. 
     this.map.entities.clear(); 

     // get the users query and geocode it. 
     let query: string = (<HTMLInputElement>document.getElementById("txtInput")).value; 
     this.geocodeQuery(query); 
    } 

    private geocodeQuery = (query: string) => { 
     var userData = { name: 'Maps Test User', id: 'XYZ' }; 
     let searchRequest: Microsoft.Maps.Search.IGeocodeRequestOptions = { 
      where: query, 
      userData: userData, 
      count: 5, 
      bounds: this.map.getBounds(), 
      callback: function (r: any) { 
       // PROBLEM: r undefined. 
       if (r && r.results && r.results.length > 0) { 
        var topResult = r.results[0]; 
        if (topResult) { 
         this.addPin(topResult.location); 
         $('#txtInput').focus().select(); 
        } 
       } 
      }, 
      errorCallback: function (e: any) { 
       // If there is an error, alert the user about it. 
       alert("No results found."); 
      } 
     }; 

     // make the geocode request: 
     this.searchManager.geocode(searchRequest); 
    } 

    // .. other stuff in class 
} 


let geo: BMGeocode = new BMGeocode(); 

function onGeocodeClick() { 
    geo.search(); 
} 

$(function() { 
    geo.loadMap(); 
    $('#geocode').click(onGeocodeClick); 
}) 

Ich denke, ich habe das Problem erkannt haben, warum es nicht funktioniert, wie die Search immer null ist oder: Nach der Lektüre über 'this' in TypeScript, ich habe meine Funktionen Instanz Funktionen (zB Pfeil-Funktionen) geändert nicht definiert. Ich weiß jedoch nicht, wie ich es lösen soll.

Diese Linie von den Funktions Werke ‚Suche‘, aber scheint nicht zu den Search Variable zu setzen:

this.searchManager = new Microsoft.Maps.Search.SearchManager(this.map); 

die Search nicht gesetzt ist, so kann ich nicht eine Anfrage:

// make the geocode request: 
    this.searchManager.geocode(searchRequest); 

Wie kann dies in TypeScript gelöst werden?

Update: dies scheint nicht zu arbeiten entweder:

public search =() => { 
      if (!this.searchManager) { 
       var self = this; 
       Microsoft.Maps.loadModule('Microsoft.Maps.Search', function() { 
        self.searchManager = new Microsoft.Maps.Search.SearchManager(self.map); // PROBLEM!! 
    self.search(); 
       }); 

      } else { 

      // remove any previous results from the map. 
      this.map.entities.clear(); 

      // get the users query and geocode it. 
      let query: string = (<HTMLInputElement>document.getElementById("txtInput")).value; 
      this.geocodeQuery(query); 
     } 

Answer 1

Problem ist, dass this Variable nicht auf BMGeocode bezieht sich, wie Sie aber auf die Schließung erwarten würde, in dem Sie verwenden möchten, zu es. Versuchen Sie dies stattdessen:

var self = this 
Microsoft.Maps.loadModule('Microsoft.Maps.Search', function() { 
    self.searchManager = new Microsoft.Maps.Search.SearchManager(self.map) ; // PROBLEM: searchManager is never set? 
});