Bing Mapsのジオコードコールバックは

Question

全体像と呼ばれてはいけない：

私は自分のアプリケーションにジオコーディングを追加したいです。私はそれをまっすぐにJavaScriptで動作させることができましたが、コールバックはAngular/TypeScriptに変換した後にトリガされません。

例：ユーザーが入力した場合1マイクロソフトウェイ、ワシントン州レッドモンド。経度と緯度が返されるべきである：緯度：47.64006815850735、経度：

• Bing Maps Ajax API - get location from address
• https://msdn.microsoft.com/en-us/library/hh868062.aspx

エラー：-122.12985791265965

コード例は、以下のリソースをオフに構築され詳細：

エラーは、特に変数名内で発生しています：geocodeRequest。 searchModuleLoaded()がロードされますが、geocodeRequestはgeocodeCallbackまたはerrCallbackをトリガーしません。私はそれが私のメソッドの範囲と関係があると思っていますが、エラーの原因を特定することはできません。コールバックを起動させる方法に関するアイデアはありますか？

角度/活字体（機能しない）

$onInit() { 
    this.getMap(); 
} 

getMap() { 
    this.map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: "your key here"}); 
    Microsoft.Maps.loadModule('Microsoft.Maps.Search', { callback: this.searchModuleLoaded }); 
}; 

searchModuleLoaded() { 
    var searchManager = new Microsoft.Maps.Search.SearchManager(this.map); 
    var geocodeRequest = { 
     where: "1 Microsoft Way, Redmond, WA", 
     count: 10, 
     callback: this.geocodeCallback, 
     errorCallback: this.errCallback 
    }; 

    searchManager.geocode(geocodeRequest); 
} 

geocodeCallback(geocodeResult, userData) { 
    // this callback never gets triggered 
    alert("The first geocode result is " + geocodeResult.results[0].location + "."); 
} 

errCallback(geocodeRequest) { 
    // this callback never gets triggered 
    alert("An error occurred."); 
} 

ワーキングバージョン（動作しますが、無角/活字体）

function GetMap(){ 

    map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {credentials: "key goes here", center: new Microsoft.Maps.Location(47.5, -122.3), zoom: 9 }); 

    Microsoft.Maps.loadModule('Microsoft.Maps.Search', { callback: searchModuleLoaded }); 
} 

function searchModuleLoaded(){ 
    var searchManager = new Microsoft.Maps.Search.SearchManager(map); 

    var geocodeRequest = {where:"1 Microsoft Way, Redmond, WA", count:10, callback:geocodeCallback, errorCallback:errCallback}; 
    searchManager.geocode(geocodeRequest); 
    debugger; 
} 

function geocodeCallback(geocodeResult, userData){ 
    alert("The first geocode result is " + geocodeResult.results[0].location + "."); 
} 


function errCallback(geocodeRequest){ 
    alert("An error occurred."); 
} 

Answer 1

調査をfurthingした後、私は自分を解決することができました問題。

何が問題でしたか？

searchModuleLoadedの問題が発生しています。どちらのコールバックもundefinedでした。 1つの問題は、モジュールがロードされる前にsearchModuleLoadedを実行しようとしていて、thisのコンテキストを知らなかったために別の問題が発生したことです。

Microsoft.Maps.Searchをロードしているときにコールバックを修正する必要がありました。モジュールのコールバックはラムダ関数に変換され、this.searchModuleLoaded()を呼び出します。これがJavaScriptにコンパイルされると、_this = thisのようにthisのコンテキストが適切に設定されます。私のコードは次のようになります：

getMap() { 
    this.map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: "put your key here"}); 
    Microsoft.Maps.loadModule('Microsoft.Maps.Search', { 
     callback:() => { 
      this.searchModuleLoaded(); 
     } 
    }); 
}; 

searchModuleLoaded() { 
    var searchManager = new Microsoft.Maps.Search.SearchManager(this.map); 
    var geocodeRequest = { 
     where: "1 Microsoft Way, Redmond, WA", 
     count: 10, 
     callback: this.geocodeCallback, 
     errorCallback: this.errCallback 
    }; 
    searchManager.geocode(geocodeRequest); 
}; 

geocodeCallback(geocodeResult, userData) { 
    alert("The first geocode result is " + geocodeResult.results[0].location + "."); 
}; 

errCallback(geocodeRequest) { 
    alert("An error occurred."); 
};