# base-amap2

> vue2 ``` npm install base-amap@2.x.x ``` vue3 ``` npm install base-amap@3.x.x ```

Latest version **2.0.1** (published 2022-08-16) · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install base-amap2
pnpm add base-amap2
yarn add base-amap2
bun add base-amap2
```

Provides the commands `vue-fix`, `vue-switch`.

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2022-08-16 |
| First published | 2022-08-08 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 7 |
| Unpacked size | 1.8 MB |
| Known vulnerabilities | 0 (+24 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | yuhaining |

## Links

- npm: https://www.npmjs.com/package/base-amap2
- npm.io page: https://npm.io/package/base-amap2

## Dependencies (7)

- [save](https://npm.io/package/save.md) ^2.5.0
- [axios](https://npm.io/package/axios.md) ^0.18.0
- [layui](https://npm.io/package/layui.md) ^2.7.6
- [moment](https://npm.io/package/moment.md) ^2.24.0
- [core-js](https://npm.io/package/core-js.md) ^3.8.3
- [tiny-emitter](https://npm.io/package/tiny-emitter.md) ^2.1.0
- [@amap/amap-jsapi-loader](https://npm.io/package/@amap/amap-jsapi-loader.md) ^1.0.1

## Recent versions

- 2.0.1 (latest) — 2022-08-16
- 2.0.0 — 2022-08-16
- 3.0.0 — 2022-08-16
- 0.0.8 — 2022-08-16
- 0.0.7 — 2022-08-16
- 0.0.6 — 2022-08-15
- 0.0.5 — 2022-08-11
- 0.0.4 — 2022-08-10
- 0.0.3 — 2022-08-10
- 0.0.2 — 2022-08-09
- 0.0.1 — 2022-08-09
- 0.0.0 — 2022-08-08

## README

####1.NPM引入
######VUE2与VUE3分别采用2.x.x / 3.x.x大版本号

vue2
```
 npm install base-amap@2.x.x
```
vue3
```
 npm install base-amap@3.x.x
```

####2.VUE配置

######BaseAmap注册时配置项说明
```
    //定位后台域名
    baseHttpUrl:string,
    //高德地图key
    amapKey: string,
    //存储OA用户sid的键名(需在服务所在的LocalStorage中存储sid)
    sidLocalStorageKeyName?: string,
    //项目名称
    projectCode: string
```
######代码示例
```

import BaseAmap from 'base-amap'
import 'base-amap/lib/style.css'

createApp(App)
    .use(BaseAmap,{
        useGuiJi:true,
        amapKey:'1ca569e765cfb1fc36840bb9513bac90',
        baseHttpUrl:'https://hxmapd.huaxincem.com'
    })
    .mount('#app')
```

####3.界面使用
#####BaseAmap为封装地图的全局基本组件.除此之外,也可使用AmapLoader.init方法自定义渲染地图(BasePosition组件即采用此方式)
```
   <template>
           <div id="postionMapContainer"></div>
   </template>
   
   <script>
       let amapModel = new AmapModel();
       AmapLoader.init("postionMapContainer").then(initAmapModel => {
           //initAmapModel中存储了地图基本元素. 本处采用复制值方式给amapModel属性赋值,避免vue子组件无法动态接收
           Object.assign(amapModel,initAmapModel);
       })
   </sript>
```
#####基础地图组件使用代码示例
a.简略使用
```
   <BaseAmap></BaseAmap>
```
b.开启轨迹查询功能(useGuiJi),围栏绘制渲染功能(useWeiLan) 
```
   <BaseAmap :useGuiJi="true" :useWeiLan="true"></BaseAmap>
```

c.插槽方式自定义轨迹查询界面(#guiJi),自定义围栏绘制渲染界面(#weiLan).
```
   <BaseAmap>
        <template #guiJi>轨迹查询界面(自定义轨迹查询界面及功能)</template>
        <template #weiLan>围栏功能界面(自定义围栏界面及功能)</template>
   </BaseAmap>
```

#####单独使用轨迹组件示例
    
```
<template>

    <--起初始化地图图层信息作用-->
    <div id="myGuiJiMap" style="height: 500px;width: 600px"></div>
    
    <-- gjCloseFun 导航关闭事件 -->
    <BaseGj :amapModel="amapModel" @gjCloseFun="daohangClose"/>
    
 </template> 
 
 <script>
        import {AmapModel,AmapLoader,EventAction,MapConstant} from 'base-amap'
 
        let amapModel = new AmapModel();
        AmapLoader.init("myWeiLanMap").then(initAmapModel => {
            //initAmapModel中存储了地图基本元素. 本处采用复制值方式给amapModel属性赋值,避免vue子组件无法动态接收
            Object.assign(amapModel,initAmapModel);
        })
    </sript>
```
#####单独使用围栏组件示例

```
<template>
        <div id="myWeiLanMap" style="height: 500px;width: 600px"></div>

        <-- 
             weiLanOptionInfo 围栏信息
             weiLanAddOrUpdateCallBackFun 保存后回调
             weiLanCloseFun 关闭事件
          -->
        <BaseWeiLan
                    :amapModel = "amapModel"
                    :weiLanOptionInfo="weiLanOptionModel"
                    @weiLanAddOrUpdateCallBackFun="weiLanAddOrUpdateCallBack"
                    @weiLanCloseFun="weiLanClose"/>
          
 </template>                   
        
        
   <script>
        import {AmapModel,AmapLoader,EventAction,MapConstant} from 'base-amap'
        
       let amapModel = new AmapModel();
       AmapLoader.init("myWeiLanMap").then(initAmapModel => {
           Object.assign(amapModel,initAmapModel);
       })
   </sript>
```
#####实时定位跟踪组件使用代码示例
   
   ```
           <BasePosition :cars="mycars"></BasePosition>
           
           let mycars = ["京F00001","京F00002"]
   ```

---
_Source: https://npm.io/package/base-amap2 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._