@amap/amap-jsapi-loader
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    amap-jsapi-loader

    amap-jsapi-loader 是高德开放平台官网提供的地图 JSAPI 的加载器,可帮助开发者快速定位、有效避免加载引用地图 JSAPI 各种错误用法。

    该加载器具有以下特性:

    • 支持以 普通JS 和 npm包 两种方式使用;
    • 有效避免错误异步加载导致的 JSAPI 资源加载不完整问题;
    • 对于加载混用多个版本 JSAPI 的错误用法给予报错处理;
    • 对于不合法加载引用 JSAPI 给予报错处理;
    • 支持指定 JSAPI 版本;
    • 支持插件加载;
    • 允许多次执行加载操作,网络资源不会重复请求,便于大型工程模块管理;

    USAGE

    AMapLoader.load方法参数说明

    AMapLoader.load({
        "key": "",              // 申请好的Web端开发者Key,首次调用 load 时必填
        "version": "2.0",   // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
        "plugins": []           // 需要使用的的插件列表,如比例尺'AMap.Scale'等
        "AMapUI": {             // 是否加载 AMapUI,缺省不加载
            "version": '1.1',   // AMapUI 缺省 1.1
            "plugins":[],       // 需要加载的 AMapUI ui插件
        },
        "Loca":{                // 是否加载 Loca, 缺省不加载
            "version": '1.3.2'  // Loca 版本,缺省 1.3.2
        },
    }).then(()=>{
        window.AMap.xx;
        window.AMapUI.xx;
        window.Loca.xx
    });

    AMapUI

    AMapUI 用法和官网有一点点区别。通过 AMapUI.xx 来获取组件

    AMapLoader.load({
        key: '',//首次load必填
        version: '2.0',
        AMapUI: {
            version: '1.1',
            plugins: ['overlay/SimpleMarker'],
        }
    }).then((AMap) => {
        map = new AMap.Map('container');
    
        // !!! 通过 AMap.SimpleMarker 获取组件
        new AMapUI.SimpleMarker({
            //前景文字
            iconLabel: 'A',
            //图标主题
            iconTheme: 'default',
            //背景图标样式
            iconStyle: 'red',
            map: map,
            position: map.getCenter()
        });
    }).catch((e) => {
        console.error(e);
    });

    使用

    以普通 JS 方式使用 Loader

    尚未发布在线Loader,可将 dist/index.js 复制到项目下

    <script src="../dist/index.js"></script>
    <script>
        AMapLoader.load({
            key:'',//首次load必填
            version:'2.0',
            plugins:['AMap.Scale']
        }).then((AMap)=>{
            map = new AMap.Map('container');
            map.addControl(new AMap.Scale())
        }).catch((e)=>{
            console.error(e);
        });   
    </script>
    

    以 NPM 包方式使用 Loader

    安装

    tnpm i @alife/amap-jsapi-loader --save-dev
    

    使用

    import AMapLoader from '@alife/amap-jsapi-loader';
    
    AMapLoader.load().then((AMap)=>{
        map = new AMap.Map('container');
    }).catch(e=>{
        console.log(e);
    })
    
    

    相关链接:

    地               图 JSAPI:   示例中心    教程    参考手册

    数据可视化 JSAPI:   示例中心    教程    参考手册

    Install

    npm i @amap/amap-jsapi-loader

    DownloadsWeekly Downloads

    3,710

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    136 kB

    Total Files

    19

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar