Skip to content

iBiz-Vue-R7-Res
iBiz-Vue-R7-Res
提交 1683f20e 编写于 作者: Mosher's avatar Mosher
浏览文件
操作

地图定位组件调整

上级 c1d6db61
隐藏空白字符变更
内嵌 并排
正在显示 包含 464 行增加 和 90 行删除
src/components/app-map-position/app-map-position.less
浏览文件 @ 1683f20e
.el-input__inner{
height: 32px;
}
.el-icon-check{
display: none;
}
.el-button--primary{
height: 34px;
padding: 0 12px;
>span{
margin-left: 0 !important;
.app-map-position {
.map-modal {
.el-dialog {
margin-top: 60px !important;
width: 90%;
.el-dialog__header {
padding: 10px 0px 10px 40px;
}
.el-dialog__body {
padding: 6px 10px;
.search-toolbar {
display: flex;
#map__result {
position: absolute;
z-index: 20;
right: 10px;
top: 110px;
}
.el-vue-search-box-container {
border: 1px solid #DCDFE6;
height: 40px;
margin-right: 20px;
}
}
}
.amap-marker-content {
img {
width: 25px;
height: 34px;
}
.input-map__marker {
position: absolute;
top: -28px;
right: -160px;
color: #fff;
padding: 0px 10px;
-webkit-box-shadow: 1px 1px 1px rgba(10,10,10,.2);
box-shadow: 1px 1px 1px rgba(10,10,10,.2);
white-space: nowrap;
font-size: 12px;
font-family: "";
background-color: #25a5f7;
border-radius: 3px;
}
}
}
.el-vue-amap-container {
padding-top: 20px;
height: 640px;
}
}
}
}
\ No newline at end of file
src/components/app-map-position/app-map-position.vue
浏览文件 @ 1683f20e
<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>
<el-input
size="small"
@focus="handleMapShow"
v-model="value"
:placeholder="placeholder ? placeholder : $t('components.appMapPosition.title')">
</el-input>
<el-dialog
:title="$t('components.appMapPosition.title')"
class="map-modal"
:visible.sync="dialogShow">
<div class="search-toolbar">
<el-input id="map__search" size="small" @change="handleSearch" v-model="searchAddress" />
<div id="map__result" class="content-result" v-show="resultShow"></div>
</div>
<div class="map__content">
<el-amap
:center="center"
:amap-manager="amapManager"
zoom="12"
:events="events"
ref="map">
<el-amap-marker
class="map-marker"
vid="component-marker"
:position="marker.position">
<div>
<img src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png">
<span class="input-map__marker">{{ marker.address }}</span>
</div>
</el-amap-marker>
</el-amap>
</div>
<template slot="footer">
<el-button
type="primary"
size="small"
@click="handleSubmit">
{{ $t('components.appMapPosition.submit') }}
</el-button>
</template>
</el-dialog>
</div>
</template>
<script lang='tsx'>
import { Vue, Component, Prop, Provide, Emit, Watch, Model,Inject } from 'vue-property-decorator';
import { Vue, Component, Prop, Watch, Model } from 'vue-property-decorator';
import { Subject, Subscription } from 'rxjs';
import AppCenterService from "@service/app/app-center-service";
import { AMapManager } from 'vue-amap';
@Component({
components: {
}
})
@Component({})
export default class AppMapPosition extends Vue {
/**
* 双向绑定表单项值
*
* @type {*}
* @memberof AppMapPosition
*/
@Model('change') public value: any;
/**
* 应用上下文
*
* @type {any}
* @memberof AppInputIp
* 占位内容
*
* @type {*}
* @memberof AppMapPosition
*/
@Prop() public placeholder?: string;
/**
* 经度
*
* @type {*}
* @memberof AppMapPosition
*/
@Prop() public longitude?: any;
/**
* 纬度
*
* @type {*}
* @memberof AppMapPosition
*/
@Prop() public latitude?: any;
/**
* 地址
*
* @type {*}
* @memberof AppMapPosition
*/
@Prop() public address?: any;
/**
* 模式（address、longitude、latitude）
*
* @type {*}
* @memberof AppMapPosition
*/
@Prop({default: 'address'}) public mode: any;
/**
* 表单数据
*
* @type {*}
* @memberof AppMapPosition
*/
@Prop() context: any;
@Prop() public data: any;
/**
* 视图参数
*
* @type {any}
* @memberof AppInputIp
* 表单通讯对象
*
* @type {*}
* @memberof AppMapPosition
*/
@Prop() viewparam: any;
@Prop() public formState!: Subject<any>;;
/**
* 表单状态对象
* 搜索框显示值
*
* @type {Subject<any>}
* @memberof AppInputIp
* @type {*}
* @memberof AppMapPosition
*/
@Prop() public formState!:Subject<any>;
public searchAddress: string = '';
/**
* 表单绑定地址数据
*
* @type {any}
* AMap SDK对象
*
* @type {*}
* @memberof AppMapPosition
*/
@Model('change') public addrdata:any;
public amapManager: any = new AMapManager();
/**
* 经度
*
* @type {any}
* 地图中心点
*
* @type {*}
* @memberof AppMapPosition
*/
@Prop() longitude:any;
public center: any[] = [104.09427199999999, 30.660396];
/**
* 纬度
*
* @type {any}
* 地图模态框显示状态
*
* @type {*}
* @memberof AppMapPosition
*/
@Prop() latitude:any;
public dialogShow: boolean = false;
/**
* 高德初始化参数
*
* 地图标点信息
*
* @type {*}
* @memberof AppMapPosition
*/
public params:any = {
zoom: 10,
zoomEnable: true,
dragEnable: true
}
public marker: any = {};
/**
* 显示数据
*
* @type {Array}
* 初始化地图标点
*
* @type {*}
* @memberof AppMapPosition
*/
public form:any[] = [];
/**
* Vue声明周期(处理组件的输入属性)
public markerResult: any = {};
/**
* 事件集合
*
* @type {*}
* @memberof AppMapPosition
*/
public created(){
if(this.formState){
this.formState.subscribe(({type,data})=>{
if(Object.is('load',type)){
this.loadData();
public events: any = {};
/**
* 获取地址需求AMap插件对象
*
* @type {*}
* @memberof AppMapPosition
*/
public geocoder: any;
/**
* 当前 window
*
* @type {*}
* @memberof AppMapPosition
*/
public win: any;
/**
* 搜索结果显示框状态
*
* @type {*}
* @memberof AppMapPosition
*/
public resultShow: boolean = false;
/**
* Vue生命周期
*
* @memberof AppMapPosition
*/
public created() {
this.win = window as any;
if(this.formState) {
this.formState.subscribe(({ type, data }) => {
if(Object.is('load', type)) {
this.initMap();
}
})
}else{
this.loadData();
}
}
}
/**
* Vue生命周期
*
* @memberof AppMapPosition
*/
public mounted() {
let amap: any = this.win.AMap;
amap.plugin(["AMap.Geocoder"], () => {
this.geocoder = new amap.Geocoder({
extensions: "all",
})
})
this.initMapEvents();
}
/**
* 根据当前模式初始化地图
*
* @memberof AppMapPosition
*/
public initMap() {
if(!this.mode || !this.value) {
return;
}
if(Object.is(this.mode, 'address')) {
this.initByAddress()
} else if(Object.is(this.mode, 'longitude')) {
this.initByLng();
} else if(Object.is(this.mode, 'latitude')) {
this.initByLat();
}
}
/**
* mode = address，初始化地图
*
* @memberof AppMapPosition
*/
public initByAddress() {
if(this.longitude && this.latitude && this.data) {
const position = [this.data[this.longitude], this.data[this.latitude]];
Object.assign(this.marker, {
position: position,
address: this.value,
visible: true
});
this.center = position;
this.searchAddress = this.marker.address;
Object.assign(this.markerResult, this.marker);
} else {
Object.assign(this.marker, {
position: [104.09427199999999, 30.660396],
address: '四川省成都市成华区猛追湾街道四川电视塔天府熊猫塔',
visible: true
})
this.searchAddress = this.marker.address;
}
}
/**
* mode = longitude，初始化地图
*
* @memberof AppMapPosition
*/
public initByLng() {
if(this.latitude && this.data) {
this.handleMarker(this.value, this.data[this.latitude], this);
} else {
Object.assign(this.marker, {
position: [104.09427199999999, 30.660396],
address: '四川省成都市成华区猛追湾街道四川电视塔天府熊猫塔',
visible: true
})
this.searchAddress = this.marker.address;
}
}
/**
* 加载数据
* mode = latitude，初始化地图
*
* @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, "内蒙古自治区乌兰察布市集宁区新体路街道顺达源广告传媒" ];
public initByLat() {
if(this.longitude && this.data) {
this.handleMarker(this.data[this.longitude], this.value, this);
} else {
Object.assign(this.marker, {
position: [104.09427199999999, 30.660396],
address: '四川省成都市成华区猛追湾街道四川电视塔天府熊猫塔',
visible: true
})
this.searchAddress = this.marker.address;
}
}
/**
* 选中数据变化
* 初始化地图事件
*
* @memberof AppMapPosition
*/
public initMapEvents() {
const that: any = this;
that.events = {
click($event: any) {
that.mapClick($event);
},
init($event: any) {
that.map = $event;
}
};
}
/**
* 展开模态框
*
* @memberof AppMapPosition
*/
public handleMapShow() {
this.resultShow = false;
this.dialogShow = true;
this.searchAddress = this.markerResult.address;
Object.assign(this.marker, this.markerResult);
this.center = this.markerResult.position;
}
/**
* 处理地图标点
*
* @param {*} lng 经度
* @param {*} lat 纬度
* @param {*} that this指针
* @param {boolean} flag 是否更新结果集
* @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]);
public async handleMarker(lng: any, lat: any, that: any, flag: boolean = true) {
const address = await this.getAddress(lng, lat).catch((error) => {
console.warn(error);
});
if(!address) {
return;
}
Object.assign(that.marker, { position: [lng, lat], address: address, visible: true });
that.searchAddress = address;
that.center = [lng, lat];
if(flag) {
Object.assign(this.markerResult, this.marker);
}
}
/**
* 搜索地址
*
* @memberof AppMapPosition
*/
public handleSearch() {
this.center = [];
const that = this;
let placeSearch: any;
// 调用服务搜索结果
that.win.AMap.service(["AMap.PlaceSearch"], () => {
placeSearch = new this.win.AMap.PlaceSearch({
pageSize: 5,
city: '成都',
citylimit: false,
panel: 'map__result',
})
placeSearch.search(that.searchAddress, (status: any, result: any) => {
if (status == 'complete' && result.info == 'OK') {
this.resultShow = true;
if(result.poiList.pois) {
that.handleMarker(result.poiList.pois[0].location.R, result.poiList.pois[0].location.Q, that, false);
}
}
})
})
// 监听搜索结果列表点击事件
that.win.AMap.event.addListener(placeSearch,"listElementClick", (e: any) => {
if(e.data.location) {
that.handleMarker(e.data.location.R, e.data.location.Q, that, false);
}
})
}
/**
* 地图点击事件
*
* @memberof AppMapPosition
*/
public mapClick($event: any) {
if(!$event && !$event.lnglat) {
return;
}
const that = this;
that.handleMarker($event.lnglat.lng, $event.lnglat.lat, that, false);
}
/**
* 调用服务，根据经纬度获取地址信息
*
* @param {*} lng 经度
* @param {*} lat 纬度
* @memberof AppMapPosition
*/
public getAddress(lng: any, lat: any) {
return new Promise((resolve, reject) => {
this.geocoder.getAddress([lng,lat],(status:any,result: any) => {
if (status === 'complete' && result.info === 'OK') {
if (result && result.regeocode) {
const address = result.regeocode.formattedAddress;
resolve(address);
}
}
})
})
}
/**
* 点击模态确认按钮，提交数据
*
* @memberof AppMapPosition
*/
public handleSubmit() {
this.dialogShow = false;
Object.assign(this.markerResult, this.marker);
if(!this.markerResult || !this.mode) {
return;
}
if(Object.is(this.mode, 'address')) {
this.$emit('change', this.markerResult.address);
const lng = { name: this.longitude, value: this.markerResult.position[0].toString() };
const lat = { name: this.latitude, value: this.markerResult.position[1].toString() };
this.$emit('itemChange', lng, lat);
} else if(Object.is(this.mode, 'longitude')) {
this.$emit('change', this.markerResult.position[0]);
const address = { name: this.address, value: this.markerResult.address };
const lat = { name: this.latitude, value: this.markerResult.position[1].toString() };
this.$emit('itemChange', address, lat);
} else if(Object.is(this.mode, 'latitude')) {
this.$emit('change', this.markerResult.position[1]);
const address = { name: this.address, value: this.markerResult.address };
const lng = { name: this.longitude, value: this.markerResult.position[0].toString() };
this.$emit('itemChange', address, lng);
}
}
}
</script>
......
src/locale/lanres/components/components_en_US.ts
浏览文件 @ 1683f20e
......@@ -375,5 +375,9 @@ export default {
false: 'False',
deleteImageFailure:'Image deletion failed',
updateFailure: 'Batch update file failed',
},
appMapPosition: {
submit: 'Submit',
title: 'Please select address'
}
};
\ No newline at end of file
src/locale/lanres/components/components_zh_CN.ts
浏览文件 @ 1683f20e
......@@ -376,5 +376,9 @@ export default {
false: '取消',
deleteImageFailure:'删除图片失败',
updateFailure: '批量更新文件失败',
},
appMapPosition: {
submit: '确认',
title: '请选择地址'
}
};
\ No newline at end of file
src/shims-vue.d.ts
浏览文件 @ 1683f20e
......@@ -10,4 +10,5 @@ declare module '@fullcalendar/interaction';
declare module 'vue-grid-layout';
declare module 'vue-print-nb';
declare module 'vuedraggable';
declare module 'ibiz-vue-pivottable';
\ No newline at end of file
declare module 'ibiz-vue-pivottable';
declare module 'vue-amap';
\ No newline at end of file
src/template.html
浏览文件 @ 1683f20e
......@@ -14,7 +14,5 @@
<div id="app"></div>
<script src="./environments/environment.js"></script>
<script src="./assets/js/avue.min.js"></script>
<script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.11&key=6ab2751103aea67e817c90a5528181b5&plugin=AMap.PlaceSearch'></script>
<script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
</body>
</html>
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或