如何在网页中插入地图?

tech2025-02-11  12

如何在网页中插入地图?

1. 安装

<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script> <script src="https://img.hcharts.cn/highmaps/modules/map.js"></script>

2. 获取地图数据文件(地图数据集)

1) 获取一个js文件(推荐) <script src="https://data.jianshukeji.com/geochina/china.js"></script> <script src="https://data.jianshukeji.com/geochina/shanghai.js"></script> <script> var mapdata = Highcharts.maps['cn/china']; </script> 2) 获取一个json数据 使用之前要先安装jQuery $.getJSON('https://data.jianshukeji.com/jsonp?filename=geochina/china.json&callback=?', function(data) { var mapdata = data; });

3. 编程

1) html <div id="container" style="hight:500px"></div> 2) js var map = Highcharts.mapChart('container', { series: [{ mapData: mapdata, data: [{ name: '北京', value: 2000, rank: 1 }, { name: '上海', value: 1500, rank: 2 }], joinBy: 'name' }] })

4 效果(稍微改动过)

最新回复(0)