利用Mysql中的数据绘制带权重的Google Heatmap

cute_Lily

于 2016-06-07 09:11:07 发布

阅读量1.1k

点赞数

分类专栏：数据可视化 Web前端编程语言文章标签： HeatMap Google Map API

本文链接：https://blog.csdn.net/coffee_cream/article/details/51601312

版权

下面是自己利用Google Heatmap和mysql数据库中的经纬度、权重值绘制的带权重的热力图。

HeatMap.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*"%>
<html>
	<head>
	<meta charset="utf-8">
		<title>Heatmaps</title>
		<style>
			html, body {
				height: 100%;
				margin: 0;
				padding: 0;
			}
			#map {
				height: 100%;
			}
			#floating-panel {
				position: absolute;
				top: 10px;
				left: 25%;
				z-index: 5;
				background-color: #fff;
				padding: 5px;
				border: 1px solid #999;
				text-align: center;
				font-family: 'Roboto','sans-serif';
				line-height: 30px;
				padding-left: 10px;
			}
			#floating-panel {
				background-color: #fff;
				border: 1px solid #999;
				left: 25%;
				padding: 5px;
				position: absolute;
				top: 10px;
				z-index: 5;
			}
		</style>
	</head>

	<body>		
		<div id="floating-panel">
			<button οnclick="toggleHeatmap()">Toggle Heatmap</button>
			<button οnclick="changeGradient()">Change gradient</button>
			<button οnc