amap-utils

基于高德地图JS-API二次封装的工具库

快速开始

安装

npm i @maybecode/amap-utils

CDN

<script src="https://cdn.jsdelivr.net/npm/@maybecode/amap-utils/dist/index.umd.min.js"></script>

Demo

Demo

特色功能

• 封装围栏相关api,更方便、快捷的处理围栏相关业务，同时兼容PC和移动端（移动端采用拖拽选址的方式）
• 封装轨迹相关api
• 封装定位相关api
• 内置围栏合法验证相关算法、例：多边形是否合法
• 在工具库不满足业务的情况下,提供原生的AmapUtils.AMap对象进行业务的定制
• 提供Promise封装的loadPlugins、loadUIPlugins方法进行异步的插件和UI加载

基础用法

import AmapUtils from '@maybecode/amap-utils'

const amapUtils = new AmapUtils({
    key: "key",             // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [
        'AMap.MouseTool',
        'AMap.PolygonEditor',
        'AMap.CircleEditor',
    ],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    "AMapUI": {             // 是否加载 AMapUI，缺省不加载
        "version": '1.1',   // AMapUI 版本
        "plugins": [
            'misc/PositionPicker' // 移动端拖拽选址
        ],       // 需要加载的 AMapUI ui插件
    },
});

console.log(amapUtils)

const init = async () => {
    // 容器 <div id="map"></div>
    const map = await amapUtils.initMap('map', {
        center: [116.397428, 39.90923],
        // zooms: [4, 18],//设置地图级别范围
        zoom: 13
    });

}

init()

更多用法请参考示例代码,常用的使用方法都有相关的示例。

文档

注：需要具备一定的typescript知识

类型定义

开发

调试

npm run dev

构建

npm run build

License

MIT