<style lang='less' scoped>
.mapContent{
position:relative;
}
#mapContainer {
width: 100%;
height: 500px
}
#tip {
position: absolute;
top:-60px;
}
#tip .el-input{
width:179px;
margin-right:0px;
}
#tip .el-select{margin-right:10px;}
#tip .el-select{width:179px}
#tip .el-textarea{
width:179px;
/deep/ .el-textarea__inner {
height:40px;
resize:none
}
}
</style>
<template>
<div class="mapContent">
<div id="mapContainer"></div>
<div id="tip" v-show="showFlag === false ? false : true">
<el-select
v-model="province"
@change="selectP"
placeholder='省'
>
<el-option
v-for="item in provinces"
:key='item.adcode'
:label='item.name'
:value='item.adcode'
>
</el-option>
</el-select>
<el-select
v-model="city"
@change="selectC"
placeholder='市'
>
<el-option
v-for="item in citys"
:key='item.adcode'
:label='item.name'
:value='item.name'
>
</el-option>
</el-select>
<el-select
v-model="district"
@change="selectD"
placeholder='区'
>
<el-option
v-for="item in districts"
:key='item.adcode'
:label='item.name'
:value='item.adcode'
>
</el-option>
</el-select>
<el-input type='textarea' id="searchValue" placeholder="地址" v-model="address" clearable></el-input>
</div>
</div>
</template>
<script>
import AMap from 'AMap'
import image from '../assets/images/ic_locationmarker.png'
export default {
data () {
return {
map: null,
provinces: [],
province: '',
districts: [],
district: '',
citys: [],
city: '',
polygons: [],
areacode: '',
address: '',
objPoint: []
}
},
props: ['flagVisible', 'position'],
computed: {
showFlag () {
return this.flagVisible
}
},
mounted () {
setTimeout(() => {
var that = this
this.map = new AMap.Map('mapContainer', {
resizeEnable: true,
zoom: 10
})
this.marker = new AMap.Marker({
icon: new AMap.Icon({
size: new AMap.Size(36, 44),
image: image
}),
map: that.map
})
AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Geocoder'], function () {
var autocomplete = new AMap.Autocomplete({
input: 'searchValue'
})
var placeSearch = new AMap.PlaceSearch({
city: that.acode,
citylimit: true,
pageSize: 1,
pageIndex: 1,
map: that.map
})
AMap.event.addListener(autocomplete, 'select', function (e) {
that.marker.setMap(that.map)
that.marker.setPosition(e.poi.location)
placeSearch.search()// 关键字查询查询
geocoder.getAddress(e.poi.location, function (status, result) {
if (status === 'complete') {
var obj = {}
that.province = result.regeocode.addressComponent.province
that.city = result.regeocode.addressComponent.city
that.district = result.regeocode.addressComponent.district
obj.formattedAddress = result.regeocode.formattedAddress
obj.areacode = result.regeocode.addressComponent.adcode
that.address = result.regeocode.formattedAddress
obj.lat = e.poi.location.lat
obj.lng = e.poi.location.lng
that.$emit('searchAddress', obj)
} else {
that.$emit('searchAddress', '')
}
})
that.map.setFitView()
})
// 经纬度
var geocoder = new AMap.Geocoder({
radius: 1000
})
that.map.on('click', function (e) {
for (var i = 0, l = that.polygons.length; i < l; i++) {
that.polygons[i].setMap(null)
}
that.marker.setMap(that.map)
that.marker.setPosition(e.lnglat)
geocoder.getAddress(e.lnglat, function (status, result) {
if (status === 'complete') {
var obj = {}
that.province = result.regeocode.addressComponent.province
that.city = result.regeocode.addressComponent.city
that.district = result.regeocode.addressComponent.district
obj.formattedAddress = result.regeocode.formattedAddress
obj.areacode = result.regeocode.addressComponent.adcode
that.address = result.regeocode.formattedAddress
obj.lat = e.lnglat.lat
obj.lng = e.lnglat.lng
that.$emit('pickedAddress', obj)
} else {
that.$emit('pickedAddress', '')
}
})
})
// 根据坐标点定位,获取地址的详细信息
if (that.position) {
that.marker.setMap(that.map)
that.marker.setPosition(that.position)
geocoder.getAddress(that.position, function (status, result) {
if (status === 'complete') {
var obj = {}
obj.formattedAddress = result.regeocode.formattedAddress
obj.areacode = result.regeocode.addressComponent.adcode
that.address = result.regeocode.formattedAddress
that.$emit('positionAddress', obj)
that.province = result.regeocode.addressComponent.province
that.city = result.regeocode.addressComponent.city
that.district = result.regeocode.addressComponent.district
}
})
that.map.setFitView()
} else {
return false
}
})
}, 500)
this.loadmap()
},
methods: {
loadmap (val) {
let params = val
var that = this
// 插件
for (var j = 0, k = that.polygons.length; j < k; j++) {
that.polygons[j].setMap(null)
}
AMap.plugin(['AMap.DistrictSearch', 'AMap.Polygon'], function () {
// 标注
var opts = {
subdistrict: 1,
extensions: 'all',
showbiz: false
}
var district = new AMap.DistrictSearch(opts)// 注意：需要使用插件同步下发功能才能这样直接使用
function getData (data) {
// 清除地图上的所有覆盖物
// console.log(data)
that.areacode = data.citycode
var bounds = data.boundaries
if (data.level === 'country') {
that.provinces = data.districtList
that.citys = []
that.districts = []
} else if (data.level === 'province') {
that.map.remove(that.marker)
that.citys = data.districtList
that.districts = []
that.address = ''
} else if (data.level === 'city') {
that.districts = data.districtList
}
if (data.level === 'country' && bounds) {
return false
} else {
for (var i = 0, l = bounds.length; i < l; i++) {
var polygon = new AMap.Polygon({
map: that.map,
strokeWeight: 1,
strokeColor: '#CC66CC',
fillColor: '#CCF3FF',
fillOpacity: 0.5,
path: bounds[i]
})
that.polygons.push(polygon)
}
that.map.setFitView()
}
}
let sear = val ? params : '中国'
district.search(sear, function (status, result) {
if (status === 'complete') {
getData(result.districtList[0])
}
})
})
},
selectP (val) {
this.loadmap(val)
this.city = ''
this.district = ''
},
selectC (val) {
this.loadmap(val)
this.district = ''
},
selectD (val) {
this.loadmap(val)
}
}
}
</script>
