155 lines
3.9 KiB
Vue
155 lines
3.9 KiB
Vue
<template>
|
|
<div>
|
|
<!-- 坐标拾取 -->
|
|
<el-dialog
|
|
@close="closeMap"
|
|
:title="$t('message.alarmValueSet.coordinatePick')"
|
|
:visible.sync="dialogVisible"
|
|
:modal-append-to-body="false"
|
|
width="80%"
|
|
>
|
|
<div slot="default" class="coordinate-picking">
|
|
<!-- 地址 -->
|
|
{{ $t('message.alarmValueSet.gdAddress') }}:
|
|
<el-input
|
|
size="medium"
|
|
v-model="coordinateInfo.city"
|
|
id="tipinput"
|
|
:placeholder="$t('message.alarmValueSet.placeholder')"
|
|
></el-input>
|
|
<!-- <el-button type="primary" size="medium" @click="search">查询</el-button>-->
|
|
<!-- 经度 -->
|
|
{{ $t('message.alarmValueSet.longitude') }}:
|
|
<el-input
|
|
size="medium"
|
|
v-model="coordinateInfo.lng"
|
|
:placeholder="$t('message.alarmValueSet.placeholder')"
|
|
></el-input>
|
|
<!-- 纬度 -->
|
|
{{ $t('message.alarmValueSet.latitude') }}:
|
|
<el-input
|
|
size="medium"
|
|
v-model="coordinateInfo.lat"
|
|
:placeholder="$t('message.alarmValueSet.placeholder')"
|
|
></el-input>
|
|
<el-button size="medium" type="primary" @click="submit">
|
|
<!-- 提交 -->
|
|
{{ $t('message.alarmValueSet.submit') }}
|
|
</el-button>
|
|
</div>
|
|
<div id="container"></div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
addProjectForm: {
|
|
type: Object,
|
|
default: {}
|
|
}
|
|
},
|
|
name: 'gd-map',
|
|
data() {
|
|
return {
|
|
coordinateInfo: {
|
|
city: '',
|
|
lng: '',
|
|
lat: ''
|
|
},
|
|
map: {},
|
|
auto: {},
|
|
placeSearch: {},
|
|
dialogVisible: true
|
|
}
|
|
},
|
|
mounted() {
|
|
// console.log("过来了吗", this.addProjectForm);
|
|
this.coordinateInfo.city = this.addProjectForm.areaName
|
|
this.coordinateInfo.lng = this.addProjectForm.longitude
|
|
this.coordinateInfo.lat = this.addProjectForm.latitude
|
|
this.$nextTick(() => {
|
|
this.initMap()
|
|
})
|
|
},
|
|
|
|
methods: {
|
|
initMap() {
|
|
//地图加载
|
|
this.map = new AMap.Map('container', {
|
|
resizeEnable: true,
|
|
center: [
|
|
this.addProjectForm.longitude != ''
|
|
? this.addProjectForm.longitude
|
|
: '112.5',
|
|
this.addProjectForm.latitude != ''
|
|
? this.addProjectForm.latitude
|
|
: '23'
|
|
]
|
|
})
|
|
//输入提示
|
|
var autoOptions = {
|
|
input: 'tipinput'
|
|
}
|
|
this.auto = new AMap.Autocomplete(autoOptions)
|
|
this.placeSearch = new AMap.PlaceSearch({
|
|
map: this.map
|
|
}) //构造地点查询类
|
|
AMap.event.addListener(this.auto, 'select', this.select) //注册监听，当选中某条记录时会触发
|
|
this.map.on('click', (e) => {
|
|
this.coordinateInfo.lng = e.lnglat.getLng()
|
|
this.coordinateInfo.lat = e.lnglat.getLat()
|
|
// console.log('您在 [ ' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ' ] 的位置单击了地图！');
|
|
})
|
|
},
|
|
select(e) {
|
|
console.log('select', e)
|
|
this.placeSearch.setCity(e.poi.adcode)
|
|
this.placeSearch.search(e.poi.name) //关键字查询查询
|
|
},
|
|
search() {
|
|
// console.log('a', e.poi.adcode, 'name', e.poi.name, '----------placeSearch', this.placeSearch)
|
|
// this.placeSearch.setCity(e.poi.adcode);
|
|
// this.placeSearch.search(e.poi.name); //关键字查询查询
|
|
},
|
|
submit() {
|
|
this.$emit('save', this.coordinateInfo)
|
|
},
|
|
closeMap() {
|
|
this.$emit('closeMap', false)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
.coordinate-picking {
|
|
.flex;
|
|
/*justify-content: space-between;*/
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
|
|
.el-input {
|
|
width: 20%;
|
|
margin: 0 10px 0 5px;
|
|
}
|
|
|
|
.el-button {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
#container {
|
|
width: 100%;
|
|
height: 600px;
|
|
}
|
|
|
|
/deep/ .el-dialog__body {
|
|
padding-top: 10px;
|
|
}
|
|
</style> |