当前位置：首页 > news >正文

map---显示地区地图

news 2026/3/26 19:52:24

通过Echarts显示地图：

第一步：获取地图数据

获取地址：

https://datav.aliyun.com/portal/school/atlas/area_selector

https://www.naturalearthdata.com/

比如：曲靖，获取这个json

第二步：具体的代码

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@6.0.0/dist/echarts.min.js"></script>

这里：qujing.json 就是刚刚获取到的json

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 曲靖市地图示例</title>
<!-- 引入 ECharts 库 -->
<script type="text/javascript" src="./echarts.js"></script>
<style>#main {width: 800px;height: 600px;margin: 0 auto;}
</style>
</head>
<body><!-- 为 ECharts 准备一个具备大小的 DOM --><div id="main"></div><script type="text/javascript">// 假设 qujing.json 是曲靖市的 GeoJSON 数据文件// 在实际应用中，你需要将此文件放在正确的路径下，或通过其他方式获取数据
        fetch('qujing.json').then(response => response.json()).then(kunmingJson => {// 注册地图数据
                echarts.registerMap('kunming', kunmingJson);// 初始化 ECharts 实例var myChart = echarts.init(document.getElementById('main'));// 配置图表选项var option = {title: {text: '云南曲靖市地图'},tooltip: {trigger: 'item',formatter: '{b}'},series: [{name: '曲靖市',type: 'map',map: 'kunming',label: {show: true},data: [// 这里可以添加曲靖市下属区域的数据// 例如：{name: '五华区', value: 100},// {name: '盘龙区', value: 200}
                        ]}]};// 渲染图表
                myChart.setOption(option);}).catch(error => {console.error('加载地图数据失败:', error);});</script>
</body>
</html>