正文
vue+Element-ui 的 el-cascader 做高德地图的省市区三级联动并且是异步加载，点击省市区跳转到对应的区（地图可以通过后端返回的点进行标点）
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
// 完整版高德地图，可以复制代码直接使用
index.html
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key= 这里的key 自行去高德地图申请 &plugin=AMap.DistrictSearch"></script>
template
<el-cascader size="large"
:options="init_list"
v-model="selectedOptions"
:props="props"
@visible-change="show_init"
@change="change"
change-on-select // 可以跳转二级 ---》 市区的视野
placeholder="请选择省/市/区" >
</el-cascader>
<!-- 高德地图 -->
<div id="amap-main">
</div>
script 部分
var map, district,polygons = [],
citycode;
import request from '../../api/request'
let node=[]
data
selectedOptions:[],
init_list:[
{value:1,
label:1,
level:1
}
],
props : {
lazy: true,
lazyLoad (node, resolve) {
if(node.data.level){
if(node.data.level==="district"){
// console.log(node.pathLabels)
this.selectedOptions = node.pathLabels
map.setZoomAndCenter(13,[node.data.center.lng,node.data.center.lat]);
return resolve();
}
}
setTimeout(() => {
let nodes=[]
district.search(node.value, function(status, result) {
if(status === 'complete'){
// console.log(result.districtList[0].level)
nodes=result.districtList[0].districtList.map(item=>{
return{
value:item.adcode,
label:item.name,
...item,
level:result.districtList[0].level,
leaf:result.districtList[0].level==='city'
}
})
// console.log(nodes)
// 通过调用resolve将子节点数据返回，通知组件数据加载完成
resolve(nodes);
}
})
},100);
},
},
created() {
// 获取地图
this.requestMap()
},
methods:
// 根据经纬度向后端请求数据
requestMap(){
let that =this
let url =` 后端接口 ?zoom=14&lat=22.52500873&lng=113.93763613`
request.get(url).then((res)=>{
that.updateMap(res)
})
},
updateMap(res){
let that=this
let array =res.data;
map = new AMap.Map('amap-main',
{resizeEnable: true,zoom:14,
center: new AMap.LngLat(113.95379912288666, 22.535850238935417)
})
that.show_init()
var markers;
creatMaker(array)
function creatMaker(array){
markers = [];
for(let item of array){
var marker = new AMap.Marker({
position: new AMap.LngLat(item.longitude,item.latitude),
// offset: new AMap.Pixel(-10, -10),
// icon: '//vdata.amap.com/icons/b18/1/2.png', // 添加 Icon 图标 URL
});
markers.push(marker)
}
map.add(markers);
}
map.on('moveend', mapMoveend);
function mapMoveend (){
var zoom = map.getZoom(); //获取当前地图级别
var center = map.getCenter(); //获取当前地图级别
// console.info(zoom,center);
map.remove(markers);
let url
if(zoom<11||zoom>16){
url =` 后端接口api ?lat=${center.lat}&lng=${center.lng}`;
}else{
url =` 后端接口api ?zoom=${zoom}&lat=${center.lat}&lng=${center.lng}`;
}
request.get(url).then((res)=>{
// console.info(res)
creatMaker(res.data)
})
}
},
change(){
let that=this
district.search(that.selectedOptions.slice(-1)[0], function(status, result) {
if(status === 'complete'){
// console.log(result)
let res=result.districtList[0];
if(res.level==='province'){
map.setZoomAndCenter(7,[res.center.lng,res.center.lat]);
}
if(res.level==='city'){
map.setZoomAndCenter(11,[res.center.lng,res.center.lat]);
}
if(res.level==='district'){
// console.info("获取到当前区的中心点的经纬度： ",res.center.lng,res.center.lat)
// console.info(res.name) // 获取到当前选中的区
// console.info(res.adcode) // 获取到当前区域的 adcode
map.setZoomAndCenter(13,[res.center.lng,res.center.lat]);
<!-- 支持地图逆解，可以用adCode（城市的编码，还可以用 经纬度 ） --!>
// AMap.plugin('AMap.Geocoder', function() {
// var geocoder = new AMap.Geocoder({
// // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
// city: '010'
// })
// var lnglat = [116.396574, 39.992706]
// geocoder.getAddress(lnglat, function(status, result) {
// if (status === 'complete' && result.info === 'OK') {
// // result为对应的地理位置详细信息
// }
// })
// })
}
}
})
},
// 出现下拉框时 触发请求
show_init(status){
if(status){
//行政区划查询
let that=this
var opts = {
subdistrict: 1, //返回下一级行政区
showbiz:false //最后一级返回街道信息
};
district = new AMap.DistrictSearch(opts);//注意：需要使用插件同步下发功能才能这样直接使用
district.search('中国', function(status, result) {
if(status=='complete'){
// console.log(result.districtList[0]) 中国地图的所有区域
that.init_list=result.districtList[0].districtList.map(item=>{
return {
value: item.adcode,
label: item.name,
...item,
level:''
}
})
}
});
}
},
