HJY
/
smart-tourism


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
							<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>热力图示例</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<style type="text/css">
	html, body {
		width: 100%;
		height: 100%;
	}
	* {
		margin: 0px;
		padding: 0px;
	}
	button {
		width: 100px;
		border: 1px solid #555;
	}
	#container {
	height: 100%;

	}
	  [title="到腾讯地图查看此区域"] {
     display: none !important;
    }
    #container div div div span {
      display: none !important;
    } 
	</style>
	<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&libraries=visualization&key=MU5BZ-H2ARW-6CLR6-RGB4A-BDRB3-AZFKV"></script>
	<script>
	window.onload = function(){
		// 创建地图
		var map = new qq.maps.Map(document.getElementById("container"), {
			 // mapTypeId:qq.maps.MapTypeId.HYBRID,
			center: new qq.maps.LatLng(29.439652,88.285456),//(北纬，东经)中心坐标
			zoom:10,   //缩放大小
			 mapStyleId: 'style1'


		});


		// 创建热力图对象
		var heat = new qq.maps.visualization.Heat({
			map: map, // 必填参数，指定显示热力图的地图对象
			radius: 30, // 辐射半径，默认为20
		});
		// 获取热力数据
	var data = getHeatData();
		// x, y 表示二维坐标； value表示强弱值
//  var data = [    {lat: 471, lng: 277, value: 25},    {lat: 438, lng: 375, value: 97},    {lat: 373, lng: 19, value: 71},    {lat: 473, lng: 42, value: 63},    {lat: 463, lng: 95, value: 97},    {lat: 590, lng: 437, value: 34},    {lat: 377, lng: 442, value: 66},    {lat: 171, lng: 254, value: 20},    {lat: 6, lng: 582, value: 64},    {lat: 387, lng: 477, value: 14},    {lat: 300, lng: 300, value: 80}];

		// 向热力图传入数据
		heat.setData(data);

		// 监听button事件，更改热力图配置参数
		document.getElementById("setOptions").addEventListener("click", function(e) {
			var target = e.target;
			switch (target.id) {
				case "show":
					if (heat.visible) {
						heat.hide(); // 显示热力图
					} else {
						heat.show(); // 隐藏热力图
					}
					break;
				case "data":
					data = getHeatData(10);
					heat.setData(data); // 重置热力图数据
					break;
				case "radius":
					let radius = heat.getRadius(); // 获取辐射半径
					heat.setRadius(radius + 10); // 设置辐射半径
					break;
				case "gradient":
					let gradient = heat.getGradient(); // 获取渐变色
					gradient[1.0] = "#fff"; // 强度最大为白色
					heat.setGradient(gradient); // 设置渐变色
					break;
				case "opacity":
					let opacity = heat.getOpacity();
					opacity = [0.1, 0.8]; // 透明度变化范围为0.2～0.8
					heat.setOpacity(opacity); // 设置透明度变化范围
					break;
				case "destroy":
					heat.destroy();
				default:
			}
		});

		function getHeatData(cnt, max, min) {
			let data = [];  //29.439652,88.285456
			let center = {
				lat: 29.439652,  
				lng: 88.285456
			};
			cnt = cnt || 100;
			max = max || 100;
			min = min || 0;
			for (let index = 0; index < cnt; index++) {
				let r = Math.random();
				let angle = Math.random() * Math.PI * 2;
				let heatValue = Math.random() * (max - min) + min;
				data.push({
					lat: center.lat + r * Math.sin(angle),
					lng: center.lng + r * Math.cos(angle),
					value: heatValue
				});
			}
			return {
				max: max,
				min: min,
				data: data
			};
		}
	}
	</script>
</head>
<body>
	<div id="container"></div>
	<div id="setOptions">
		<button id="show" hidden>显示/隐藏</button>
		<button id="data" hidden>更新数据</button>
		<button id="radius" hidden>改变半径</button>
		<button id="gradient" hidden>改变颜色</button>
		<button id="opacity" hidden>改变透明度</button>
		<button id="destroy" hidden>销毁对象</button>
	</div>
</body>
</html>