####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"]