前言
由于AzureMaps的文档写的过于简洁。这个简洁可不是我说的，是ChatGpt说的
Azure Maps 的官方文档 确实偏概括、不够细致，特别是对
azure-maps-drawing-tools插件的说明 基本就只有示例代码，没有系统性的 API 文档或参数详解，这对开发者尤其是使用插件时调试是比较困难的。
所以汇总下常规用法
创建Web应用
先决条件
- 创建 Azure Maps 帐户获取key
这里的第三部获取key需要自己去操作，因为本人调研的时候直接拿到的key故无从得知后台界面操作。
身份验证
AzureMaps提供了四种身份验证类型
| aad | AAD 隐式授予机制。 建议用于受登录保护的页面。 默认情况下，当映射控件初始化时，页面将被重定向到 AAD 登录名。 在 中AuthenticationOptions指定登录PublicClientApplication，以便更好地控制用户登录时间/方式。 文本值 "aad" |
|---|---|
| anonymous | 匿名身份验证机制。 建议用于公共页面。 允许提供负责获取身份验证令牌的回调。 文本值 "anonymous" |
| sas | 共享访问签名身份验证机制。 允许在请求中提供负责获取令牌的回调。 文本值 "sas"。 |
| subscriptionKey | 订阅密钥身份验证机制。 文本值 "subscriptionKey" |
一般我们会使用anonymous或者subscriptionKey的方式来初始化地图
anonymous身份验证
如果想要更加安全的访问，官方推荐使用anonymous的方式来取得身份验证。如果使用这种方式来获取身份验证你在初始化地图的时候需要在authOptions配置authType为anonymous。根据示例代码
map = new atlas.Map("map", {
center: [-97.55859, 39.63953],
zoom: 3,
pitch: 60,
style: "grayscale_dark",
antialias: true,
authOptions: {
//Use Microsoft Entra ID authentication.
authType: 'anonymous',
clientId: 'e6b6ab59-eb5d-4d25-aa57-581135b927f0', // 这个客户端id从AzureMap后台拿
getToken: function (resolve, reject, map) {
//URL to your authentication service that retrieves an Microsoft Entra ID Token.
var tokenServiceUrl = 'https://samples.azuremaps.com/api/GetAzureMapsToken';
fetch(tokenServiceUrl).then(r => r.text()).then(token => resolve(token));
}
//从AzureMaps后台获取key来加载地图
//authType: 'subscriptionKey',
//subscriptionKey: '[YOUR_AZURE_MAPS_KEY]' 这里输入你申请的key
}
});
subscriptionKey方式验证
subscriptionKey方式验证身份就跟我们国内的如高德地图一样。高德地图的初始化地图代码输入在高德地图后台申请的key来启动服务。
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: "「你申请的安全密钥」",
};
</script>
<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript">
AMapLoader.load({
key: "「你申请的应用Key」", //申请好的Web端开发者 Key，调用 load 时必填
version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
})
.then((AMap) => {
const map = new AMap.Map("container");
})
.catch((e) => {
console.error(e); //加载错误提示
});
</script>
使用AzureMaps初始化的时候如果使用这种方式，anonymous身份验证代码块内注释有介绍。
在项目中使用
有两种方式引入地图包
- 在网页中创建新地图这种方式比较简单，直接对照文档来创建
- 使用 azure-maps-control npm 包
如何使用azure-maps-control npm包来创建地图
如果你有现成的项目需要引入该包则需要直接安装
npm install azure-maps-control
还需要嵌入 CSS 样式表才能正确显示各种控件。 如果使用的是 JavaScript 捆绑程序来捆绑依赖项并打包代码，请参考所使用捆绑程序的文档，了解如何完成操作。 如果使用的是 webpack，则通常通过将 style-loader 和 css-loader 与 style-loader 提供的文档相结合来完成。
npm install --save-dev style-loader css-loader
在源文件中，导入 atlas.min.css：
JavaScript
import "azure-maps-control/dist/atlas.min.css";
然后将加载程序添加到 webpack 配置的模块规则部分：
module.exports = {
module: {
rules: [
{
test: /.css$/i,
use: ["style-loader", "css-loader"]
}
]
}
};
完成以上配置之后可以直接使用如下代码来初始化
import * as atlas from "azure-maps-control";
import "azure-maps-control/dist/atlas.min.css";
const onload = () => {
// Initialize a map instance.
const map = new atlas.Map("map", {
view: "Auto",
// Add authentication details for connecting to Azure Maps.
authOptions: {
authType: "subscriptionKey",
subscriptionKey: "<Your Azure Maps Key>"
}
});
};
document.body.onload = onload;
那么正常来说你页面上地图应该已经渲染了，地图渲染在页面上一个id为map的元素内。
错误
什么？你的地图没有渲染且页面上报了如下的错误？
ERROR
Failed to fetch
TypeError: Failed to fetch
at e.eval (webpack://azuremap/./node_modules/azure-maps-control/dist/atlas-esm.min.js?:170:1274720)
at Object.eval [as next] (webpack://azuremap/./node_modules/azure-maps-control/dist/atlas-esm.min.js?:170:1260844)
at eval (webpack://azuremap/./node_modules/azure-maps-control/dist/atlas-esm.min.js?:170:1259849)
at new Promise (<anonymous>)
at __awaiter$1 (webpack://azuremap/./node_modules/azure-maps-control/dist/atlas-esm.min.js?:170:1259600)
at e._request (webpack://azuremap/./node_modules/azure-maps-control/dist/atlas-esm.min.js?:170:1274118)
at eval (webpack://azuremap/./node_modules/azure-maps-control/dist/atlas-esm.min.js?:170:1266552)
两种解决方案
- 挂梯子
- 截止我博客发时可以生效的就是本地host添加一行
13.107.42.21 atlas.microsoft.com
