highmap 中国地图，highchart与highmap冲突解决方法

原创已于 2022-04-21 13:48:30 修改 · 2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2019-02-25 17:13:05 首次发布

前端同时被 2 个专栏收录

58 篇文章

订阅专栏

highMap

1 篇文章

订阅专栏

本文详细介绍如何使用Highcharts和Highmaps库绘制中国地图，并展示了如何加载地图数据、设置地图样式及交互效果。通过随机数据填充各省份，实现地图颜色渐变效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>中国地图</title>
</head>
<body>
<div id="map" style="width:800px;height: 500px;"></div>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://img.hcharts.cn/highmaps/highmaps.js"></script>
<script src="https://data.jianshukeji.com/geochina/china.js"></script>
<script>
    // 随机数据
    var data = [{"name":"北京","value":1},{"name":"天津","value":2},{"name":"河北","value":3},{"name":"山西","value":4},{"name":"内蒙古","value":5},{"name":"辽宁","value":0},{"name":"吉林","value":0},{"name":"黑龙江","value":6},{"name":"上海","value":0},{"name":"江苏","value":0},{"name":"浙江","value":0},{"name":"安徽","value":0},{"name":"福建","value":0},{"name":"江西","value":0},{"name":"山东","value":0},{"name":"河南","value":0},{"name":"湖北","value":0},{"name":"湖南","value":0},{"name":"广东","value":0},{"name":"广西","value":0},{"name":"海南","value":0},{"name":"重庆","value":0},{"name":"四川","value":0},{"name":"贵州","value":0},{"name":"云南","value":0},{"name":"西藏","value":0},{"name":"陕西","value":0},{"name":"甘肃","value":0},{"name":"青海","value":0},{"name":"宁夏","value":0},{"name":"新疆","value":0},{"name":"台湾","value":0},{"name":"香港","value":0},{"name":"澳门","value":0},{"name":"南海诸岛","value":0},{"name":"南海诸岛","value":0}];
	
	$.getJSON('https://data.jianshukeji.com/jsonp?filename=geochina/china.json&callback=?', function(mapdata) {
		var map = new Highcharts.Map('map', {
		mapNavigation: {   
			enabled: true,  //设置缩放图标的显示隐藏
			buttonOptions: {
				verticalAlign: 'bottom'  //设置缩放图标的位置
			}
		},
		title: {
			text: '中国地图'
		},
		color: "red",
		colorAxis: {
			min: 0,
			minColor: 'rgb(255,255,255)',
			maxColor: '#006cee'
			
		},
		series: [{
			data: data,
			mapData: mapdata,
			joinBy: 'name',
			name: '中国地图',
		}],
		plotOptions: {
			map: {
				states: {
				 hover: {
					color: "#FEB41C"  //鼠标hover时，显示特定颜色
					}
				}
			}
		},
		legend: {
			enabled: false  //设置下方颜色指示图标的显示隐藏
		},
		credits: { enabled: false }//设置highcharts站点标志的显示隐藏
	});	
	});	

</script>
</body>
</html>

如图：

注意：若highchart.js与highmap.js冲突，可以用

<script src="/bower_components/highcharts/modules/map.js"></script>

来代替

<script src="/bower_components/highcharts/highmaps.js"></script>