提交 91f9d1e0 编写于 作者: Shine-zwj's avatar Shine-zwj

add:新增地图定位控件

上级 fb8415ee
......@@ -145,6 +145,10 @@ export const AppComponents = {
v.component('app-mob-actionsheet',() => import('@/components/app-mob-actionsheet/app-mob-actionsheet.vue'));
// 地图定位
v.component('app-mob-map',() => import('@/components/app-mob-map/app-mob-map.vue'));
// 地图定位控件
v.component('app-mob-map-position',() => import('@/components/app-mob-map-position/app-mob-map-position.vue'));
// 地图
v.component('app-mob-map-page',() => import('@/components/app-mob-map-page/app-mob-map-page.vue'));
// 树已选择列表
v.component('app-select-tree-list',() => import('@/components/app-select-tree-list/app-select-tree-list.vue'));
// 上下文菜单
......
.app-mob-map-page {
.app-map {
width: 100vw;
height: 100vh !important;
}
}
此差异已折叠。
<template>
<div class="app-mob-map-position">
<ion-icon name="location" @click="openMap"></ion-icon>
</div>
</template>
<script lang="ts">
import { Util } from "@/ibiz-core/utils";
import i18n from "@/locale";
import store from "@/store";
import { Vue, Component, Prop } from "vue-property-decorator";
@Component({
components: {
},
})
export default class AppMobMapPosition extends Vue {
/**
* 视图上下文参数
*
* @type {*}
* @memberof AppMobMapPosition
*/
@Prop() context: any;
/**
* 视图参数
*
* @type {*}
* @memberof AppMobMapPosition
*/
@Prop() viewparams: any;
/**
* 视图参数
*
* @type {*}
* @memberof AppMobMapPosition
*/
@Prop() data?: any;
/**
* 地址
*
* @type {*}
* @memberof AppMobMapPosition
*/
@Prop() address?: any;
/**
* 经度
*
* @type {*}
* @memberof AppMobMapPosition
*/
@Prop() latitude?: any;
/**
* 纬度
*
* @type {*}
* @memberof AppMobMapPosition
*/
@Prop() longitude?: any;
/**
* 地图
*
* @type {*}
* @memberof AppMobMapPosition
*/
public map: any;
/**
* 打开地图
*
* @type {*}
* @memberof AppMobMapPosition
*/
public openMap() {
const props = {
context: Util.deepCopy(this.context),
viewparams: {
address: this.data ? this.data[this.address] : null,
longitude: this.data ? this.data[this.longitude] : null,
latitude: this.data ? this.data[this.latitude] : null,
},
close: (data?: any) => {
this.closeMap(data);
}
}
let map: any = new Vue({
store: store,
i18n: i18n,
render(h) {
return h('app-mob-map-page',{
props
});
},
}).$mount();
this.map = map;
document.getElementById('app')?.appendChild(map.$el);
}
/**
* 打开地图
*
* @type {*}
* @memberof AppMobMapPosition
*/
public closeMap(data: any) {
document.getElementById('app')?.removeChild(this.map.$el);
if (data) {
if (this.address) {
this.$emit('change', {name: this.address, value: data.address});
}
if (this.latitude) {
this.$emit('change', {name: this.latitude, value: data.latitude});
}
if (this.longitude) {
this.$emit('change', {name: this.longitude, value: data.longitude});
}
}
}
}
</script>
<style lang="less">
@import "./app-mob-map-position.less";
</style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册