提交 b76bf4ba 编写于 作者: Mosher's avatar Mosher

增加地图定位组件

上级 ed804eb6
......@@ -100,6 +100,7 @@ import AppRawItem from './components/app-rawitem/app-rawitem.vue'
import AppImageRomate from './components/app-image-romate/app-image-romate.vue'
import { MenuIcon } from './components/menu-icon/menu-icon'
import AppVuePivottable from './components/app-vue-pivottable/app-vue-pivottable.vue';
import AppMapPosition from './components/app-map-position/app-map-position.vue';
// 全局挂载UI实体服务注册中心
window['uiServiceRegister'] = uiServiceRegister;
......@@ -215,5 +216,6 @@ export const AppComponents = {
v.component('app-image-romate', AppImageRomate);
v.component('menu-icon', MenuIcon);
v.component('app-vue-pivottable', AppVuePivottable);
v.component('app-map-position', AppMapPosition);
},
};
\ No newline at end of file
.el-input__inner{
height: 32px;
}
.el-icon-check{
display: none;
}
.el-button--primary{
height: 34px;
padding: 0 12px;
>span{
margin-left: 0 !important;
}
}
<template>
<div class="app-map-position">
<el-row>
<el-col>
<avue-input-map :params="params" placeholder="请选择地图" v-model="form"></avue-input-map>
</el-col>
</el-row>
</div>
</template>
<script lang='tsx'>
import { Vue, Component, Prop, Provide, Emit, Watch, Model,Inject } from 'vue-property-decorator';
import { Subject, Subscription } from 'rxjs';
import AppCenterService from "@service/app/app-center-service";
@Component({
components: {
}
})
export default class AppMapPosition extends Vue {
/**
* 应用上下文
*
* @type {any}
* @memberof AppInputIp
*/
@Prop() context: any;
/**
* 视图参数
*
* @type {any}
* @memberof AppInputIp
*/
@Prop() viewparam: any;
/**
* 表单状态对象
*
* @type {Subject<any>}
* @memberof AppInputIp
*/
@Prop() public formState!:Subject<any>;
/**
* 表单绑定地址数据
*
* @type {any}
* @memberof AppMapPosition
*/
@Model('change') public addrdata:any;
/**
* 经度
*
* @type {any}
* @memberof AppMapPosition
*/
@Prop() longitude:any;
/**
* 纬度
*
* @type {any}
* @memberof AppMapPosition
*/
@Prop() latitude:any;
/**
* 高德初始化参数
*
* @memberof AppMapPosition
*/
public params:any = {
zoom: 10,
zoomEnable: true,
dragEnable: true
}
/**
* 显示数据
*
* @type {Array}
* @memberof AppMapPosition
*/
public form:any[] = [];
/**
* Vue声明周期(处理组件的输入属性)
*
* @memberof AppMapPosition
*/
public created(){
if(this.formState){
this.formState.subscribe(({type,data})=>{
if(Object.is('load',type)){
this.loadData();
}
})
}else{
this.loadData();
}
}
/**
* 加载数据
*
* @memberof AppMapPosition
*/
public loadData(){
if(this.latitude && this.longitude && this.addrdata){
this.form.push(this.longitude,this.latitude,this.addrdata);
}else{
this.form = [ 113.10235504165291, 41.03624227495205, "内蒙古自治区乌兰察布市集宁区新体路街道顺达源广告传媒" ];
}
}
/**
* 选中数据变化
*
* @memberof AppMapPosition
*/
@Watch('form')
public formChange(newVal:any,oldVal:any){
if(newVal){
this.$emit('longitudeChange',newVal[0]);
this.$emit('latitudeChange',newVal[1]);
this.$emit('change',newVal[2]);
}
}
}
</script>
<style lang='less'>
@import './app-map-position.less';
</style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册