<template>
|
<div>
|
<el-dialog
|
:title="title"
|
:visible.sync="visible"
|
top="30px"
|
width="1000px"
|
center
|
:before-close="close"
|
@closed="close"
|
>
|
<div
|
v-if="visible"
|
class="mapBox"
|
>
|
<div
|
class="searchBox"
|
>
|
<el-input
|
id="tipinput"
|
v-model="placeSearchName"
|
:disabled="$parent.mapType!=='edit'"
|
prefix-icon="el-icon-search"
|
placeholder="请输入地址"
|
class="input-with-select"
|
style="margin-right: 10px"
|
@keyup.enter.native="searchPlace"
|
/>
|
<el-input
|
v-model="positionInput"
|
:disabled="$parent.mapType!=='edit'"
|
prefix-icon="el-icon-position"
|
placeholder="请输入经纬度"
|
class="input-with-select"
|
style="margin-right: 10px"
|
@keyup.enter.native="searchAddress"
|
/>
|
<el-button
|
v-if="$parent.mapType==='edit'"
|
type="primary"
|
@click="search"
|
>
|
查询
|
</el-button>
|
<el-button
|
v-if="$parent.mapType==='edit'"
|
type="primary"
|
:disabled="placeSearchName===''"
|
@click="close"
|
>
|
确定
|
</el-button>
|
</div>
|
<div id="mapd" />
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
visible: { type: Boolean, required: true }
|
},
|
data () {
|
return {
|
title: '污染位置',
|
map: null,
|
geolocation: null,
|
marker: null,
|
placeSearchName: '',
|
mapPlaceSearch: null,
|
position: [],
|
positionInput: ''
|
}
|
},
|
mounted () {
|
this.$nextTick(() => {
|
this.initMap()
|
})
|
},
|
destroyed () {
|
if (this.map) {
|
this.map.destroy()
|
}
|
},
|
methods: {
|
// 初始化地图
|
initMap () {
|
let map = new AMap.Map('mapd', {
|
resizeEnable: true,
|
zooms: [3, 18],
|
zoom: 15,
|
})
|
this.map = map
|
let that = this
|
AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], function () {
|
// 实例化Autocomplete
|
let autoOptions = {
|
// city 限定城市，默认全国
|
city: '全国',
|
input: 'tipinput',
|
}
|
that.mapPlaceSearch = new AMap.PlaceSearch({
|
map: map,
|
})
|
// that.geolocation = new AMap.Geolocation({})
|
let autoComplete = new AMap.Autocomplete(autoOptions)
|
AMap.event.addListener(autoComplete, 'select', function (e) {
|
that.map.clearMap()
|
this.position = []
|
console.log('eee', e.poi.name)
|
console.log('eee', that.placeSearchName)
|
that.placeSearchName = e.poi.name
|
// that.mapPlaceSearch.search(e.poi.name)
|
})
|
AMap.event.addListener(that.mapPlaceSearch, 'markerClick', function (e) {
|
that.position = [e.data.location.lng, e.data.location.lat]
|
that.positionInput = e.data.location.lng + ',' + e.data.location.lat
|
this.placeSearchName = e.data.cityname + e.data.adname + e.data.address
|
console.log(e)
|
console.log(this.placeSearchName)
|
document.getElementById('tipinput').value = e.data.cityname + e.data.adname + e.data.address
|
})
|
})
|
if (this.$parent.mapType === 'edit') {
|
map.on('click', function (ev) {
|
that.map.clearMap()
|
that.position = [ev.lnglat.lng, ev.lnglat.lat]
|
that.positionInput = ev.lnglat.lng + ',' + ev.lnglat.lat
|
that.marker = new AMap.Marker({
|
position: that.position,
|
offset: new AMap.Pixel(-13, -30)
|
})
|
that.marker.setMap(map)
|
that.getAddress(that.position)
|
})
|
} else {
|
this.map.clearMap()
|
that.marker = new AMap.Marker({
|
map: map,
|
position: that.$parent.position
|
})
|
that.positionInput = that.toFixed(that.$parent.position[0], 8) + ',' + that.toFixed(that.$parent.position[1], 8)
|
that.marker.setMap(map)
|
that.map.setCenter(that.$parent.position)
|
that.marker.setAnimation('AMAP_ANIMATION_BOUNCE')
|
this.placeSearchName = this.$parent.address
|
}
|
},
|
toFixed (str, decimalPlaces) {
|
const num = parseFloat(str)
|
return num.toFixed(decimalPlaces)
|
},
|
getAddress (position) {
|
AMap.plugin('AMap.Geocoder', () => {
|
const geocoder = new AMap.Geocoder({})
|
geocoder.getAddress(position, (status, result) => {
|
if (status === 'complete' && result.info === 'OK') {
|
this.placeSearchName = result.regeocode.formattedAddress
|
document.getElementById('tipinput').value = result.regeocode.formattedAddress
|
}
|
})
|
})
|
},
|
search () {
|
console.log('search', this.placeSearchName)
|
if (this.positionInput) {
|
this.searchAddress()
|
return
|
}
|
if (this.placeSearchName) {
|
this.searchPlace(this.placeSearchName)
|
}
|
},
|
searchPlace () {
|
this.mapPlaceSearch.search(this.placeSearchName)
|
},
|
searchAddress () {
|
this.map.clearMap()
|
this.marker = new AMap.Marker({
|
map: this.map,
|
position: this.positionInput.split(',')
|
})
|
this.marker.setMap(this.map)
|
this.map.setCenter(this.positionInput.split(','))
|
this.getAddress(this.positionInput.split(','))
|
},
|
close () {
|
this.map.destroy()
|
this.$emit('addressAndLnt', this.position, this.placeSearchName)
|
this.$emit('update:visible', false)
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
/deep/.el-dialog__body {
|
height: 600px;
|
.mapBox {
|
width: 100%;
|
height: 100%;
|
padding-bottom: 30px;
|
position: relative;
|
.searchBox{
|
position: absolute;
|
display: flex;
|
z-index: 100;
|
width: 100%;
|
}
|
}
|
}
|
#mapd {
|
width: 100%;
|
height: 100%;
|
resize: both;
|
z-index: 0;
|
}
|
</style>
|
