Azure Maps 基本 JS 初始化使用 JQuery 引发错误答案

【问题标题】：Azure Maps Basic JS Initialization Throws Error with JQueryAzure Maps 基本 JS 初始化使用 JQuery 引发错误
【发布时间】：2019-07-06 06:12:08
【问题描述】：

我正在尝试将 Azure Maps 与他们的 JS Web SDK 一起使用。我按照https://docs.microsoft.com/en-us/azure/azure-maps/how-to-use-map-control 上的说明操作，直到添加我的订阅密钥，但它抛出了一个错误。

我已尝试删除所有选项，但它提示输入凭据，所以我知道我已通过身份验证。当放入不在 DOM 中的标识符时，我收到一条错误消息，说它找不到 id。当我输入正确的 ID 时，我会得到一个底部带有 Microsoft 徽标的白色可拖动背景。因为，从调试器看来，电话似乎来自this.map.setStyle(this.styleBuilder.build()),，我尝试提供额外的样式选项，并尝试删除中心、缩放和语言。我也尝试使用window.onload。总而言之，问题仍然存在。

只需加载脚本并插入此 sn-p：

var map = new atlas.Map(<div id>, {
    center: [-122.33, 47.6],
    zoom: 12,
    language: 'en-US',
    authOptions: {
        authType: 'subscriptionKey',
        subscriptionKey: '<Your Azure Maps Key>'
    }
});

我做到了。

只是 sn-p 产生了这个错误：

    Uncaught (in promise) TypeError: Cannot read property 'origin' of 
    undefined
    at Object.at [as getReferrer] (atlas.min.js:3066)
    at new r (atlas.min.js:3066)
    at n._updateStyle (atlas.min.js:3066)
    at n.setStyle (atlas.min.js:3066)
    at e._rebuildStyle (atlas.min.js:3391)
    at atlas.min.js:3391
at  @   atlas.min.js:3066
r   @   atlas.min.js:3066
n._updateStyle  @   atlas.min.js:3066
n.setStyle  @   atlas.min.js:3066
e._rebuildStyle @   atlas.min.js:3391
(anonymous) @   atlas.min.js:3391
Promise.then (async)        
e._setStyleComponents   @   atlas.min.js:3391
(anonymous) @   atlas.min.js:3391
Promise.then (async)        
e   @   atlas.min.js:3391
(anonymous) @   myScript.js:787

这是带有漂亮打印的错误消息：

Uncaught (in promise) TypeError: Cannot read property 'origin' of undefined
    at Object.at [as getReferrer] (atlas.min.js:formatted:25499)
    at new r (atlas.min.js:formatted:47165)
    at n._updateStyle (atlas.min.js:formatted:52481)
    at n.setStyle (atlas.min.js:formatted:52475)
    at e._rebuildStyle (atlas.min.js:formatted:60131)
    at atlas.min.js:formatted:60219
at  @   atlas.min.js:formatted:25499
r   @   atlas.min.js:formatted:47165
n._updateStyle  @   atlas.min.js:formatted:52481
n.setStyle  @   atlas.min.js:formatted:52475
e._rebuildStyle @   atlas.min.js:formatted:60131
(anonymous) @   atlas.min.js:formatted:60219
Promise.then (async)        
e._setStyleComponents   @   atlas.min.js:formatted:60172
(anonymous) @   atlas.min.js:formatted:59678
Promise.then (async)        
e   @   atlas.min.js:formatted:59673
(anonymous) @   myScript.js:formatted:787

编辑：我开始尝试并在标题中注释掉我的脚本。当我删除所有 JQuery 脚本标签时，地图工作了。（然后我验证我正在使用最新版本的 JQuery）。但是现在我的页面当然不起作用。此外，当它工作时，我检查了引发错误的 origin 属性是什么。代码是self.location.origin，self 是window。所以现在我有一个不兼容的问题。

如果有人能提供一些帮助，将不胜感激。

【问题讨论】：

标签： javascript azure azure-maps

【解决方案1】：

我没有想出它为什么不起作用的原因。但我确实设法让我的页面正确加载。

基本上，由于 Azure Maps 试图引用一个应该指向 window 但实际上是 null 的 self，所以我所做的是在初始化 `map 之前声明 self。

var self = this;
var map = new atlas.Map(<div id>, {...

这是一个 hack，它很丑，但它可以工作。

【讨论】：