一个简单的地图页面(含下钻和返回和标点)

先引入需要的东西

		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
		<script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.js"></script>

然后js写一些配置和变量

var mapData = [] //标点原始数组
var geoJson
var parentAdcode = []
var geoUrl = "https://geo.datav.aliyun.com/areas_v2/bound/";
var option = {
	//地图配置
	geo: {
		selectedMode: 'single',
		type: 'map',
		roam: true,
		zoom: 2,
		label: {
			normal: {
				show: true,
				color: '#fff'
			},
			emphasis: {
				textStyle: {
					color: '#fff'
				}
			}
		},
		itemStyle: {
			normal: {
				borderColor: '#0394d9',
				areaColor: '#161331',
			},
			emphasis: {
				areaColor: '#389BB7',
				borderWidth: 0
			}
		},
	},
	tooltip: {
		formatter: function(params) {
			var value = params.value;
			var a = '<button class="btn btn-default btn-xs Viewdetails" onclick="Viewdetails(\''+params.value[2]+'\')">查看详情</button>'
			return "<div class='gy_name'>"+value[2]+"</div>" + a;
		},
		enterable: true
	},
	//标点配置
	series: [{
		type: 'effectScatter',
		coordinateSystem: 'geo',
		animation: true,
		rippleEffect: {
			brushType: 'stroke'
		},
		symbolSize: function(val, params) {
			return 10;
		},
		data: mapData
	}]
};

mapData为标点的数组，数组每一项格式可以参照我的编造

				name: '',
				value: [
					经度,
					纬度,
					名称
				],
				label: {
					emphasis: {
						position: 'right',
						show: false
					}
				},

然后创建地图

页面需要：

<div id="main" style="width: 100%;height:840px;"></div>

js需要：

var myChart = echarts.init(document.getElementById('main'));
//初始化地图(广西)
unJson(geoUrl + "450000_full.json")

function unJson(url) {
	$.get(url, function(mJson) {
		geoJson = mJson
		initMap()
	})
};

function initMap() {
	echarts.registerMap(name, geoJson);
	myChart.setOption(option, true);
	flushMap()
};

function flushMap() {
	myChart.setOption({
		series: [{
			data: mapData
		}]
	});
}

实现页面下钻地图：原理为获取geojson里的区码，然后继续获取下一个区域的geojson，返回上一级为反向同理

myChart.on('click', {
	componentType: 'geo',
}, function(params) {
	map_down(params)
});
function map_down(params) {
	if (parentAdcode[parentAdcode.length - 1] != geoJson.features[0].properties.parent.adcode) {
		parentAdcode.push(geoJson.features[0].properties.parent.adcode)
	}
	for (let i = 0; i < geoJson.features.length; i++) {
		if (geoJson.features[i].properties.name == params.name) {
			let str = String(geoJson.features[i].properties.adcode)
			let mUrl = geoUrl + geoJson.features[i].properties.adcode
			if (str.charAt(4) == '0' && str.charAt(5) == '0') {
				unJson(mUrl + "_full.json")
			} else {
				unJson(mUrl + ".json")
			}
		}
	}
};

然后是返回上一级，需要自己弄个地方绑定，触发map_up这个方法即可

$(".back_btn").click(function(event) {
	map_up()
});
function map_down(params) {
	if (parentAdcode[parentAdcode.length - 1] != geoJson.features[0].properties.parent.adcode) {
		function map_up() {
	if (parentAdcode[0]) {
		unJson(geoUrl + parentAdcode[parentAdcode.length - 1] + "_full.json")
		parentAdcode.pop()
	}
};

剩下一些小细节自行查阅echart文档和自行补全样式和页面