必应地图地理编码回调不会被调用答案

【问题标题】：Bing Maps Geocode Callbacks Don't Get Called必应地图地理编码回调不会被调用
【发布时间】：2016-10-11 20:47:29
【问题描述】：

整体图片：

我想在我的应用程序中添加地理编码。我能够让它直接在 JavaScript 中工作，但是在转换为 Angular/TypeScript 后回调没有被触发。

示例：如果用户输入1 Microsoft Way, Redmond, WA。应返回经纬度：纬度：47.64006815850735，经度：-122.12985791265965

代码示例基于以下资源构建：

错误详情：

错误具体发生在变量名称中：geocodeRequest。 searchModuleLoaded() 被加载，但我的 geocodeRequest 永远不会触发 geocodeCallback 或 errCallback。我认为这与我的方法范围有关，但似乎无法隔离导致错误的原因。关于如何让我的回调触发的任何想法？

Angular/TypeScript（不工作）

$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.");
}

工作版本（有效，但没有 Angular/TypeScript）

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.");
}

【问题讨论】：

标签： javascript angularjs typescript bing-maps

【解决方案1】：

经过进一步调查，我能够解决我的问题。

出了什么问题？

问题发生在searchModuleLoaded 中。两个回调都是undefined。一个问题是它试图在模块加载之前执行searchModuleLoaded，而另一个问题是因为它不知道this 的上下文。

要解决此问题，我必须在加载 Microsoft.Maps.Search 时修改回调。模块的回调现在转换为 lambda 函数，该函数调用 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.");
};

【讨论】：