93 lines
2.3 KiB
HTML
93 lines
2.3 KiB
HTML
{layout name="manager/layout" /}
|
||
<style type="text/css">
|
||
#container {
|
||
height: 100vh;
|
||
}
|
||
</style>
|
||
<script src="/static/js/jquery-3.3.1.js"></script>
|
||
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&libraries=visualization&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
|
||
<script>
|
||
var page = 1;
|
||
var data = {
|
||
max: 100,
|
||
min: 0,
|
||
data: []
|
||
};
|
||
window.onload = function() {
|
||
// 创建地图
|
||
var map = new qq.maps.Map(document.getElementById("container"), {
|
||
center: new qq.maps.LatLng(30.572952, 104.066172),
|
||
zoom: 8
|
||
});
|
||
// 创建热力图对象
|
||
var heat = new qq.maps.visualization.Heat({
|
||
map: map, // 必填参数，指定显示热力图的地图对象
|
||
radius: 20, // 辐射半径，默认为20
|
||
});
|
||
function getHeatData(cnt, max, min) {
|
||
let data = [];
|
||
// let center = {
|
||
// lat: 30.572952,
|
||
// lng: 104.066172
|
||
// };
|
||
// cnt = cnt || 100;
|
||
// max = max || 100;
|
||
// min = min || 0;
|
||
// for (let index = 0; index < 100; index++) {
|
||
// let r = Math.random()*10;
|
||
// let angle = Math.random() * Math.PI * 2;
|
||
// // 点颜色变化
|
||
// let heatValue = Math.random() * (max - min) + min;
|
||
// // data.push({
|
||
// // lat: 30.65805,
|
||
// // lng: 104.136153,
|
||
// // value: 100
|
||
// // });
|
||
// data.push({
|
||
// lat: center.lat + r * Math.sin(angle),
|
||
// lng: center.lng + r * Math.cos(angle),
|
||
// value: 100
|
||
// });
|
||
// }
|
||
return {
|
||
max: max,
|
||
min: min,
|
||
data: data
|
||
};
|
||
}
|
||
|
||
function getRegister(){
|
||
$.ajax('/manager/statistical/receive', {
|
||
data: {
|
||
"page": page,
|
||
}
|
||
,dataType : 'json'
|
||
,type: 'POST'
|
||
}).done(function (res) {
|
||
if(res.code ==0 ){
|
||
if(res.data.list.length==0){
|
||
layer.msg("加载完毕")
|
||
}else{
|
||
page ++;
|
||
data.data = data.data.concat(res.data.list);
|
||
// console.log(res.data.list)
|
||
console.log(data)
|
||
heat.setData(data);
|
||
setTimeout(getRegister(),100)
|
||
}
|
||
|
||
}
|
||
})
|
||
}
|
||
getRegister();
|
||
// 获取热力数据
|
||
// var data = getHeatData();
|
||
|
||
// 向热力图传入数据
|
||
// heat.setData(data);
|
||
|
||
}
|
||
</script>
|
||
<div id="container" style="position: relative; background-color: rgb(229, 227, 223); overflow: hidden; transform: translateZ(0px);"></div>
|
||
|