Azure Maps嵌入网站显示白屏问题排查求助

已为此问题困扰2天，尝试在网站中嵌入基础版Azure Maps（无复杂功能），但页面仅显示空白屏幕。此前已完成以下排查：确认兼容性、使用G2层级、密钥正确、容器无误，页面元素存在但显示为白色，恳请提供排查方向。

相关代码 #

<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js" type="text/javascript"></script>
<script src="https://atlas.microsoft.com/sdk/javascript/service/2/atlas-service.min.js" type="text/javascript"></script>

$(document).ready(function() {
   InitMap();
});

function InitMap() {
    //Initialize a map instance.
    var map = new atlas.Map('field', {
        style: 'satellite',
        authOptions: {
            authType: 'subscriptionKey',
            subscriptionKey: '<Primary KEY>'
        }
    });
}

排查方向 #

• 检查地图容器的宽高样式：默认地图容器若未设置宽高，会被渲染为0高度，导致空白。给#field元素添加明确CSS：

#field {
    width: 100%;
    height: 600px;
}

• 监听地图加载事件排查错误：给地图实例添加ready和error事件监听，确认加载状态：

function InitMap() {
    var map = new atlas.Map('field', {
        style: 'satellite',
        authOptions: {
            authType: 'subscriptionKey',
            subscriptionKey: '<Primary KEY>'
        }
    });

    map.events.add('ready', function() {
        console.log('地图加载完成');
    });

    map.events.add('error', function(e) {
        console.error('地图加载错误:', e);
    });
}

• 验证卫星图样式权限：Azure Maps卫星图（satellite）需要启用地图服务和影像服务权限，若权限不足会导致加载失败。可先切换为road样式测试：

style: 'road'

• 查看浏览器控制台报错：打开开发者工具（F12）的Console面板，检查是否有401/403权限错误、资源加载失败等提示，直接定位问题。
• 确认jQuery已引入：代码使用了$(document).ready()，若页面未加载jQuery，InitMap()不会执行，地图无法初始化。

内容的提问来源于stack exchange，提问作者Chris Sikel