TypeError：无法解析azure-maps-control模块标识符问题求助

一、解决"无法解析模块标识符'azure-maps-control'"错误 #

你遇到的核心问题是：未使用打包器时，浏览器无法识别Node.js风格的包名导入（import "azure-maps-control"）。以下是两种可行的解决方式：

方案1：使用浏览器原生ES模块（CDN直接导入） #

1. 调整tsconfig.json配置：

   {
     "compilerOptions": {
       "target": "ES2020",
       "module": "ESNext",
       "moduleResolution": "Bundler",
       "outDir": "./dist",
       "strict": true,
       "skipLibCheck": true
     },
     "include": ["src/**/*"]
   }
   

2. TypeScript代码中直接导入CDN ES模块：

   // 导入地图控制模块与样式
   import * as atlas from 'https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js';
   import 'https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css';
   
   // 初始化地图
   const map = new atlas.Map('map-container', {
     authOptions: {
       authType: 'subscriptionKey',
       subscriptionKey: '你的Azure Maps密钥'
     },
     center: [-122.33, 47.6],
     zoom: 12
   });
   

3. HTML中用模块方式引入编译后的JS：

   <div id="map-container" style="width:100%;height:400px;"></div>
   <script type="module" src="./dist/main.js"></script>
   

方案2：使用UMD全局变量（无需import） #

1. HTML中预加载UMD版本的地图库：

   <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" />
   <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
   <div id="map-container" style="width:100%;height:400px;"></div>
   <script src="./dist/main.js"></script>
   

2. 安装类型定义以获得TS提示：

   npm install @types/azure-maps-control --save-dev
   

3. TypeScript代码直接使用全局atlas变量：

   // 无需import，直接使用全局atlas命名空间
   const map = new atlas.Map('map-container', {
     authOptions: {
       authType: 'subscriptionKey',
       subscriptionKey: '你的Azure Maps密钥'
     },
     center: [-122.33, 47.6],
     zoom: 12
   });
   

4. 调整tsconfig.json（可选）：
   若TS提示atlas未定义，可在compilerOptions中添加：

   "types": ["azure-maps-control"]
   

二、Azure Maps按需加载实现 #

完全可以实现按需加载，以下是两种常用方式：

方式1：动态ES模块导入 #

通过import()函数在需要时加载地图库，适合现代浏览器：

async function initMapOnDemand() {
  // 动态加载地图模块与样式
  const atlas = await import('https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js');
  
  const styleLink = document.createElement('link');
  styleLink.rel = 'stylesheet';
  styleLink.href = 'https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css';
  document.head.appendChild(styleLink);

  // 初始化地图
  const map = new atlas.Map('map-container', {
    authOptions: {
      authType: 'subscriptionKey',
      subscriptionKey: '你的Azure Maps密钥'
    },
    center: [-122.33, 47.6],
    zoom: 12
  });
}

// 示例：用户点击按钮后加载地图
document.getElementById('load-map-btn').addEventListener('click', initMapOnDemand);

方式2：动态创建脚本标签加载UMD库 #

兼容更多浏览器（包括旧版）：

function loadMapOnDemand() {
  return new Promise((resolve, reject) => {
    // 加载样式
    const cssLink = document.createElement('link');
    cssLink.rel = 'stylesheet';
    cssLink.href = 'https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css';
    document.head.appendChild(cssLink);

    // 加载地图脚本
    const mapScript = document.createElement('script');
    mapScript.src = 'https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js';
    mapScript.onload = () => resolve(window.atlas);
    mapScript.onerror = () => reject(new Error('地图库加载失败'));
    document.body.appendChild(mapScript);
  }).then((atlas) => {
    // 初始化地图
    const map = new atlas.Map('map-container', {
      authOptions: {
        authType: 'subscriptionKey',
        subscriptionKey: '你的Azure Maps密钥'
      },
      center: [-122.33, 47.6],
      zoom: 12
    });
  }).catch(err => console.error(err));
}

// 触发加载（如页面滚动到指定区域后）
window.addEventListener('scroll', () => {
  const mapContainer = document.getElementById('map-container');
  const rect = mapContainer.getBoundingClientRect();
  if (rect.top < window.innerHeight && rect.bottom > 0) {
    loadMapOnDemand();
    window.removeEventListener('scroll', arguments.callee);
  }
});

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