一、获取地图的相关数据和引入要用到的js库
1.1-引入echarts和jquery库
在bootcdn中分别搜索echarts和jquery库,点击复制script标签引入html文件中
1.2-使用ajax请求获取中国地图的json数据
http://datav.aliyun.com/portal/school/atlas/area_selector
点击上面链接进入页面,复制json数据的请求地址
二、绘制矢量地图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>中国地图的基本实现</title>
<!-- 引入jquery和echarts库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.1/echarts.min.js"></script>
<!-- <script src="./lib/echarts.min.js"></script>
<script src="./lib/jquery.min.js"></script> -->
<style>
/* 为地图容器设置样式 */
.x{
height: 800px;
width: 1200px;
margin:0 auto;
/* border: 1px solid black; */
}
</style>
</head>
<body>
<!-- 创建一个容器容纳地图 -->
<div class="x" id="x"></div>
<script>
let x = document.getElementById("x")
// 初始化echarts实例
let mycharts = echarts.init(x)
//通过ajax请求获取地图的相关数据
// ./map/china.json
$.get("https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json",function(res){
console.log(res);
// 地图注册
echarts.registerMap("chinaMap",res);
// 设置图表的配置项
let option = {
geo:{
type:"map",//设置图表类型
map:"chinaMap",//需与上面echarts.registerMap方法的第一个参数保持一致
roam:true,//设置缩放和拖动
label:{
show:true,
},
zoom:1 ,// 设置初始化的缩放比例
center:[116.405285,39.904989]//设置地图中心点
}
}
//生成图表(地图)
mycharts.setOption(option)
})
</script>
</body>
</html>