Giter VIP home page Giter VIP logo

amap-js's Introduction

AMapJS

Build Status npm version npm downloads npm license

AMapJS 是AMap高德地图API加载器。可帮助开发者加载高德地图相关sdk,在模块化应用、异步编程中使用sdk更加灵活便捷。

特性

  • 支持 NPM 和 UMD 两种方式使用。
  • 支持指定 API 版本。
  • 支持插件模块加载。
  • 支持Promise。
  • 支持按需引入。
  • 允许多次执行加载操作,网络资源不会重复请求。

浏览器支持

Chrome Firefox Safari Opera Edge IE
Latest ✔ Latest ✔ Latest ✔ Latest ✔ Latest ✔ 9+ ✔

AMapJS 不支持 IE8 及以下版本。但它支持所有兼容 ECMAScript 5 的浏览器。

安装

使用npm:

npm install --save amap-js

使用yarn:

yarn add amap-js

使用cdn:

<script type="text/javascript" src="https://unpkg.com/amap-js"></script>

快速入手

AMap JSAPI的加载:

import AMapJS from "amap-js";

// 创建AMapJSAPI Loader
var AMapLoader = new AMapJS.AMapLoader({
  key: '您申请的key值',
  version: '1.4.15', // 版本号, 默认1.4.15
  plugins: [],
});

// 调用load方法加载loader并调用执行回调。
AMapLoader.load()
  .then(loader => {
    // 请求成功
  })
  .catch(e => {
    // 请求失败
  });

加载插件

// 请确保 loader.load() 加载完毕
AMapLoader.loadPlugin(['AMap.ToolBar'])
  .then(() => {
    console.log(AMap.ToolBar);
  })
  .catch(e => {})

AMap UI的加载:

import AMapJS from "amap-js";

var AMapLoader = new AMapJS.AMapLoader({
  key: '您申请的key值',
  version: '1.4.15',
  plugins: [],
});

// 创建AMapUI Loader
var AMapUILoader = new AMapJS.AMapUILoader({
  version: '1.0',
});

AMapLoader.load().then(() => {
  AMapUILoader.load().then(loader => {
    loader.initAMapUI(); // 初始化AMapUI
    // 其他逻辑
    console.log(AMap, AMapUI);
  }).catch(e => {});
}).catch(e => {});

加载模块

// 请确保 loader.load() 加载完毕
// loadUI 加载UI模块
AMapUILoader.loadUI(['overlay/SimpleMarker'])
  .then(([SimpleMarker]) => {})
  .catch(e => {});

// loadUI 加载模块
AMapUILoader.loadModule(['ui/overlay/SimpleMarker', 'lib/$'])
  .then(([SimpleMarker, $]) => {})
  .catch(e => {});

load加载:

import AMapJS from "amap-js";

var AMapLoader = new AMapJS.AMapLoader({
  key: '您申请的key值',
  version: '1.4.15',
  plugins: [],
});

var AMapUILoader = new AMapJS.AMapUILoader({
  version: '1.0',
});

AMapJS.load([AMapLoader, AMapUILoader])
  .then(([AMapLoader, AMapUILoader]) => {
    AMapUILoader.initAMapUI();
    // 其他逻辑
  })
  .catch(e => {});

按需引入

import { AMapLoader } from 'amap-js';

// 其他操作...

手册

Loaders

  • AMapLoader - 高德地图JSAPI加载器
  • AMapUILoader - 高德地图UI组件库加载器

Outher

  • load - 加载Loader

API

AMapLoader

高德地图JSAPI加载器。

构造函数 说明
AMapLoader(options:AMapLoaderOptions) 构造一个高德地图JSAPI加载器,通过AMapLoaderOptions设置加载器属性。
AMapLoaderOptions 说明 类型 默认值
key 您申请的高德key值 String -
version 高德地图 JSAPI 版本号 String 1.4.15
plugins 加载 JSAPI 提供的众多的插件 Array []
方法 说明 返回值
load() 加载高德地图JSAPI Promise
loadPlugin(plugins: []) 加载 JSAPI 提供的众多的插件,使用前确保 JSAPI 加载完成 Promise

AMapUILoader

高德地图UI组件库加载器。

构造函数 说明
AMapUILoader(options:AMapUILoaderOptions) 构造一个高德地图UI组件库API加载器,通过AMapUILoaderOptions设置加载器属性
AMapUILoaderOptions 说明 类型 默认值
version UI组件库版本号 String 1.0
方法 说明 返回值
load() 加载高德地图UI组件库 Promise
loadModule(unames: []) 加载 UI组件库 提供的众多的模块,使用前确保 UI组件库 加载完成 Promise
loadUI(unames: []) (推荐)加载 UI组件库 提供的特定UI模块,使用前确保 UI组件库 加载完成 Promise

load

方法 说明 返回值
load(loaders: Loader) 加载Loader,在不具备ES6环境中不支持直接解构 Promise

许可

MIT

amap-js's People

Contributors

iderekli avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.