如何在网页中插入地图?
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 效果(稍微改动过)