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>
以上是 vue下使用高德地图的行政区,并进行定位操作,搜索框,输入提示,根据经纬度定位 的全部内容， 来源链接： utcz.com/z/379140.html
