Heatmap 是用来呈现一定区域内的统计度量，最常见的网站访问热力图就是以特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域的图示。Heatmap.js 这个 JavaScript 库可以实现各种动态热力图的网页，帮助您研究和可视化用户的行为。Heatmap.js V2.0 是目前网络上最先进的热图可视化库。新的2.0版本 Heatmap.js 更快，拥有更强的渲染模块，使用更方便，因此您可以快速掌握和扩展自定义功能。
var mainMap; var mapOptions; var heatmap=null; //获取阈值 var max = window.localStorage.getItem("max"); //设置地图参数 var baseMapParam = { zoomControl: true, // 缩放按钮是否显示 disableDefaultUI: false, scaleControl: false, // 比例尺开关 overviewMapControl: false, // 小黄人 draggable:true, country: 'kw', zoom: 0, // 缩放比例 center: { // 中心点说 lat: 0, // 经度 lng: 0// 纬度 } }; $(function(){ //绘制地图 // MapOption(); //热力图绘制 // creatHotmap(); // 定义了一个坐标，用于地图居中34.264237, 108.977655 var mapCenter = new google.maps.LatLng( 24.871640, 102.841884); // var mapCenter = new google.maps.LatLng(34.264237, 108.977655); // 地图参数对象 mapOptions = baseMapParam; // 创建一个大地图对象 mapOptions.center = mapCenter; // 中心点坐标引入 mapOptions.minZoom = 11; // 能缩放到的最小值 mapOptions.maxZoom = 15; // 能缩放到的最大值 mapOptions.Zoom = 13; // 存放当前的缩放比例 var homeLatLng = new google.maps.LatLng(24.971676,102.669319) // 创建地图对象到map_canvas上 map = new google.maps.Map(document.getElementById('mainMap'),mapOptions); // 创建地图在ID为mainMap的元素上 //创建热力图层 heatmap = new HeatmapOverlay(map,{ // radius should be small ONLY if scaleRadius is true (or small radius is intended) "radius": 0.005,//图上坐标点的半径 "maxOpacity": 0.8,//热力图的最大透明度 // scales the radius based on map zoom "scaleRadius": true, // if set to false the heatmap uses the global maximum for colorization // if activated: uses the data maximum within the current map boundaries // (there will always be a red spot with useLocalExtremas true) "useLocalExtrema": true, // which field name in your data represents the latitude - default "lat" latField: 'lat', // which field name in your data represents the longitude - default "lng" lngField: 'lng', // which field name in your data represents the data value - default "value" valueField: 'count'//此数值对应热力图的颜色 大于8为红色 小于8以后为渐变色越来越浅 }) var marker1 = new MarkerWithLabel({ icon:"pages/images/circle.png", //mark标记的文字样式 position: homeLatLng, //mark标记的经纬度 map: map, labelContent: "我是内容
我是数字", //添加的文字 labelAnchor: new google.maps.Point(65, 60),//参数为x轴y轴的坐标 labelClass: "labels", // the CSS class for the label labelStyle: {opacity: 1} //设置文字的透明度 }) //渲染热力图 //取对应字段成格式的塞进testData对象里 testData={max:5000,data:[ {lat: 25.002888, lng:102.671726, count:5000}, {lat: 25.002888, lng:102.671726, count:5000}, {lat: 25.002888, lng:102.671726, count:5000}, {lat: 25.002888, lng:102.671726, count:5000}, {lat: 25.002888, lng:102.671726, count:5000}, {lat: 25.002888, lng:102.671726, count:5000}, {lat: 25.002888, lng:102.671726, count:5000}, {lat: 25.002888, lng:102.671726, count:5000} ]}; heatmap.setData(testData);//绘制热力图样 }) //地图绘制 function MapOption() { // 定义了一个坐标，用于地图居中34.264237, 108.977655 var myLatlng = new google.maps.LatLng(34.264237, 108.977655); // 地图参数对象 mapOptions = baseMapParam; // 创建一个大地图对象 mapOptions.center = myLatlng; // 中心点坐标引入 mapOptions.minZoom = 11; // 能缩放到的最小值 mapOptions.maxZoom = 15; // 能缩放到的最大值 mapOptions.Zoom = 14; // 存放当前的缩放比例 mapOptions.mapTypeId=google.maps.MapTypeId.ROADMAP; // 创建地图对象到map_canvas上 map = new google.maps.Map(document.getElementById('mainMap'),mapOptions); // 创建地图在ID为mainMap的元素上 }
博主项目中的需求是绘制google地图，并利用Heatmap.js绘制热力图，在热力图的周围设置自定义mark样式
并且可以自定义mark中的内容，mark可添加时间，出发时间弹出对应的内容，大致界面图如下:
