一、首先分析思路
1.下载中华人民共和国高德地图数据包
这一步是为了得到初始数据,但是直接调用下图接口就可以,参数传100000
(不断进步的过程,欢迎大家批评指正!)
2.页面加载完成在地图对省级(找到对应中心点)进行打点标注
3.为标注添加点击事件,传参为当前点击省的adcode,调用高德地图行政区域查询API服务
详见官方文档:https://lbs.amap.com/api/webservice/guide/api/district
4.市区级依次类推
二、代码实现
1.引入数据包
import zhongguo from '@/utils/amap/zhongguo.json'
2.引入axios
(我是之前安装了,如果之前没有安装,请执行npm install axios)
import axios from 'axios'
3.接口调用及方法实现
export default {
name:"ditu",
data(){
return{
amap:null,
}
},
methods: {
getAMap(){
var map, district, polygons = [], citycode;
map = new AMap.Map('map_index', {
resizeEnable: true,
center: [116.30946, 39.937629],
zoom: 4
});
this.amap = map
},
markerProvince(){//标注省
zhongguo.features.forEach(ele=>{
let map = this.amap
// 创建纯文本标记
var text = new AMap.Text({
text:ele.properties.name + "--10",
anchor:'center', // 设置文本标记锚点
// draggable:true,
cursor:'pointer',
angle:2,
style:{
'padding': '.5rem 1.25rem',
'margin-bottom': '1rem',
'border-radius': '.25rem',
'background-color': 'rgb(0, 51, 51,0.6)',
'width': '8rem',
'height': '2rem',
'border-width': 0,
'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
'text-align': 'center',
'font-size': '10px',
'color': '#fff'
},
position: ele.properties.center
});
text.setMap(map);
let that = this
text.on('click', function () {
that.searchNext(ele,map);
})
})
},
searchNext(ele,map){
axios.get("https://restapi.amap.com/v3/config/district?keywords="+ele.properties.adcode+"&subdistrict=2&key='yourkey'",{
}).then(res=>{
this.markerNext(ele,res.data.districts[0].districts,map);
}).catch({
});
},
markerNext(centerp,nextData,premap){
//清除之前的
premap.clearMap(); // 清除地图覆盖物
//标记新的,并以点击的点为中心
// premap.setCenter(centerp.properties.center); //设置地图中心点
premap.setZoomAndCenter(8, centerp.properties.center); //同时设置地图层级与中心点
nextData.forEach(ele=>{
var text = new AMap.Text({
text:ele.name + "--10",
anchor:'center',
cursor:'pointer',
angle:2,
style:{
'padding': '.5rem 1.25rem',
'margin-bottom': '1rem',
'border-radius': '.25rem',
'background-color': 'rgb(0, 51, 51,0.6)',
'width': '8rem',
'height': '2rem',
'border-width': 0,
'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
'text-align': 'center',
'font-size': '10px',
'color': '#fff'
},
position: [Number(ele.center.split(',')[0]),Number(ele.center.split(',')[1])]
});
text.setMap(premap);
let that = this
text.on('click', function () {
that.searchNext(ele,premap);
})
})
}
},
mounted(){
this.getAMap();
this.markerProvince();
}
}
实现效果:
查看官方文档很重要哦