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

本文详细介绍如何使用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>
Highmaps 是一款基于 HTML5 的优秀地图组件。 Highmaps 继承了 Highcharts 简单易用的特性,利用它可以方便快捷的创建用于展现销售、选举结果等其他地理位置关系密切的交互性地图图表。 Highmaps 可以单独使用,也可以作为 Highcharts 的一个组件来使用。 主要优势(功能特点) 完美支持移动端 Highmaps 设计之初就考虑到了移动设备浏览器,移动平台上多点触摸、手势操作均支持,同时 Highmaps 在 PC 端也最低支持 IE6。 MAP 地图数据集 为了方便用户使用,Highmaps 提供了上百个地图基础数据,这些地图都可以快速下载和使用。 free非商业使用免费 在个人网站、学校网站及非盈利机构中使用 Highmaps 完全不需要经过我们的许可,直接可以任意使用! 商业网站或网站,请查看我们的 使用协议及价格。 open开源 Highmaps 最重要的特点之一就是:无论免费版还是付费版,你都可以下载源码并可以对其进行编辑。 基于开源社区我们可以第一时间获取用户的需求、及时的 Bug 修复及吸收社区贡献。 no-backend纯 JavaScript Highmaps 完全基于 HTML5 技术,不需要再客户端安装任何插件,如 Flash 或 Java。此外你也不用配置任何服务端环境,不需要 PHP、Tomcat、ASP.NET 等,只需要两个 JS 文件即可运行。; 动态交互性 Highmaps 支持丰富交互性,在图表创建完毕后,可以用丰富的 API 进行添加、移除或修改数据列、数据点、坐标轴等操作。 结合 jQuery 的 ajax 功能,可以做到实时刷新数据、用户手动修改数据等功能,结合事件处理,可以做到各种交互功能。 图表种类丰富 Highmap s中有各种地图类型:你可以制作兴趣地图,在地图上画气泡等,这些功能是和 Highcharts 中的系列类型相对应的。. 多彩坐标轴 为了呈现多彩的地图Highmaps中有一个单独的颜色轴,它继承了坐标轴的大部分功能用来设置常见的属性,如最小值、最大值、极坐标等。 导航器 Highmaps具有所有常用的导航功能:加/减按钮,双击放大,滚动鼠标轮放大,多点触摸和平移。 钻取 钻取功能可以让同一图层的地图区流畅地进行交互。该图层可以在下面的图层放大为一整张地图。 支持 GeoJson 标准 除了常见的 数据列、数据点概念外,Highmaps 还接受标准的 GeoJson 标准的地图数据格式。 exporting导出和打印 Highmaps 支持导出模式,用户可以一键导出 PNG, JPG, PDF 或 SVG格式的文件格式。此外,用户还可以从网页上直接打印图表。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值