vue下使用高德地图的行政区,并进行定位操作,搜索框,输入提示,根据经纬度定位...

<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>

 

转载于:https://www.cnblogs.com/0915ty/p/9330330.html