热力图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>热力图</title>
<style>
#map{
width: 800px;
height: 800px;
}
</style>
<script src="http://maps.googleapis.com/maps/api/js?key=key&language=en&libraries=drawing,geometry,visualization"></script>
</head>
<body>
<div id="map"></div>
</body>
<script type="text/javascript">
var centerPoint = new google.maps.LatLng(31.2351581719, 121.5060055700); //金茂大厦
map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
minZoom: 1,
center: centerPoint,
// styles : styleJson,
zoomControl: false, // 启用/禁用缩放控件
mapTypeControl: false, // 启用/禁用允许用户在地图类型（例如地图和卫星）之间切换的地图类型控件
scaleControl: false, // 启用/禁用提供简单地图比例的“缩放”控件
streetViewControl: false, // 启用/禁用Pegman控件
rotateControl: false, // 启用/禁用旋转控件的外观以控制45°图像的方向
fullscreenControl: false, // 是否全屏 此控件在移动设备上可见，在桌面上不可见
gestureHandling: 'greedy', // 属性设置
// greedy为触摸屏和移动设备，以允许用户在用户滑动（拖动）屏幕时平移地图（向上或向下，向左或向右）。换句话说，单指滑动和双指滑动都可以使地图平移。
});
mapHeat();
google.maps.event.addDomListener(window, 'load', function() {
mapHeat();
});
// 拖拽
google.maps.event.addListener(map, 'dragend', function() {
mapHeat();
});
// 缩放
google.maps.event.addListener(map, 'zoom_changed', function() {
mapHeat();
});
function mapHeat() {
var points=[{"lng":116.418261,"lat":39.921984},{"lng":116.423332,"lat":39.916532},
{"lng":116.419787,"lat":39.930658},
{"lng":116.418455,"lat":39.920921},
{"lng":116.418843,"lat":39.915516},
{"lng":116.42546,"lat":39.918503},
{"lng":116.423289,"lat":39.919989},
{"lng":116.418162,"lat":39.915051},
{"lng":116.422039,"lat":39.91782},
{"lng":116.41387,"lat":39.917253}];
/* 热力图 */
var heatmapData = [];
for (var i = 0; i < points.length; i++) {
heatmapData.push(new google.maps.LatLng(points[i].lat, points[i].lng));
}
heatmap = new google.maps.visualization.HeatmapLayer({
data: heatmapData
// gradient : [ 'rgba(0, 255, 255, 0)', 'rgba(0, 255, 255, 1)',
// 'rgba(0, 191, 255, 1)', 'rgba(0, 127, 255, 1)', 'rgba(0, 63, 255,
// 1)', 'rgba(0, 0, 255, 1)', 'rgba(0, 0, 223, 1)', 'rgba(0, 0, 191,
// 1)', 'rgba(0, 0, 159, 1)', 'rgba(0, 0, 127, 1)', 'rgba(63, 0, 91,
// 1)', 'rgba(127, 0, 63, 1)', 'rgba(191, 0, 31, 1)', 'rgba(255, 0,
// 0, 1)' ]
});
heatmap.setMap(map);
map.panTo(new google.maps.LatLng(points[0].lat, points[0].lng));
}
</script>
</html>
