高德地图 地图控件

JS API 的加载-基础-进阶教程-地图 JS API 2.0 | 高德地图API

我采用的是npm导入的方法 公司好同事教我的 嘿嘿

import AMapLoader from '@amap/amap-jsapi-loader';
import {KEY_MAP,KEY_MAP__SECURITY_CODE} from './config'

// 地图相关
const mapInit = async () => {
  return new Promise((resolve) => {
    window.forceWebGL = true;
    window._AMapSecurityConfig = {
      securityJsCode:KEY_MAP__SECURITY_CODE , // "「你申请的安全密钥」",
    };
    AMapLoader.load({
      key: KEY_MAP, // 申请好的 Web 端开发者 Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JS API 的版本，缺省时默认为 1.4.15
      plugins: ['AMap.Scale'], // 需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['AMap.Scale','...','...']
    })
      .then((AMap) => {
        const map = new AMap.Map('map-container', {
          viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D'
          zoom: 11, // 初始化地图层级
          zooms: [2, 20], // 地图显示的缩放级别范围
          pitch: 50, // 地图俯仰角度，有效范围 0 度- 83 度
          center: [longitude.value,latitude.value], // 初始化地图中心点
          rotateEnable: false, // 是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动
          pitchEnable: true, // 是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动
        });
        resolve(map);
      })
      .catch((e) => {
        console.error(e); // 加载错误提示
      });
  });
};

同时又发现typescript的window补齐不全

//global.d.ts 声明文件
export { };  // 如果没有导出的内容，这行可以留空
declare global {//声明全局的类型
    interface Window {//多个window会合并继承
        forceWebGL: boolean;
        _AMapSecurityConfig: {
            securityJsCode: string;
        };
    }
}