Google Map heatmap

谷歌地图实现热度图，与百度地图同理，但是所依赖的库不一样

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Heatmaps</title><style>/* Always set the map height explicitly to define the size of the div* element that contains the map. */#map {height: 100%;}/* Optional: Makes the sample page fill the window. */html, body {height: 100%;margin: 0;padding: 0;}#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 onclick="toggleHeatmap()">Toggle Heatmap</button><button onclick="changeGradient()">Change gradient</button><button onclick="changeRadius()">Change radius</button><button onclick="changeOpacity()">Change opacity</button></div><div id="map"></div><script>// This example requires the Visualization library. Include the libraries=visualization// parameter when you first load the API. For example://<script src="https://maps.googleapis.com/maps/api/js?key=自填账号密码&libraries=visualization">var map, heatmap;function initMap() {map = new google.maps.Map(document.getElementById('map'), {zoom: 13,center: {lat: 37.775, lng: -122.434},mapTypeId: 'satellite'});heatmap = new google.maps.visualization.HeatmapLayer({data: getPoints(),map: map,radius:30,opacity:0.8,gradient:gradient});}
//颜色依旧是越外围越靠前，也可以理解为最外围的是基底色，所以先设置var gradient = ['rgba(0, 255, 0, 0)','rgba(255, 255, 0, 1)',//'rgba(50, 120, 205, 1)',//'rgba(100, 90, 155, 1)',//'rgba(150, 60, 105, 1)',//'rgba(200, 30, 55, 1)','rgba(255, 0, 0, 1)']function toggleHeatmap() {heatmap.setMap(heatmap.getMap() ? null : map);}// Heatmap data:  Points，两种方式都可用function getPoints() {return [//new google.maps.LatLng(37.782551, -122.445368),//{location:new google.maps.LatLng(37.782551, -122.445368), weight:20},{location:new google.maps.LatLng(37.782745, -122.444586), weight:3},{location:new google.maps.LatLng(37.783100, -122.441461), weight:7},{location:new google.maps.LatLng(37.783206, -122.440829), weight:8},{location:new google.maps.LatLng(37.783273, -122.440324), weight:19}];}</script><script async defersrc="https://maps.googleapis.com/maps/api/js?key=AIzaSyBYiPLI1A-2Z_7O3O-HVhkJkG_v2wpmbgU&sensor=false&language=zh-CN&v=3&libraries=visualization&callback=initMap"></script></body>
</html>

Google Map heatmap相关推荐

Android特色开发之Google MAP
本文节选于机械工业出版社推出的<Android应用开发揭秘>一书,作者为杨丰盛.本书内容全面,详细讲解了Android框架.Android组件.用户界面开发.游戏开发.数据存储.多媒体开发 ...
关于Google Map API V2 版本的定位与导航
近来,在关注安卓手机上的GoogleMap应用的开发,但是目前官方API版本网页版已经升级到V3版,而对于Android的支持也已经升级到V2版本,虽然Google说继续对V1版提供服务,但是不再提供 ...
分享两篇Google Map API的介绍
这两篇文章也不知道我是什么时候下载下来的,一直丢在桌面上没有看,但终于在年后无聊就看了一下,结果让我心潮澎湃,一起哈成了"都让Google做了我们还做什么?(WebMap方向)"一 ...
Google Map App 问题集锦
用此帖记录做Google Map过程中遇到的问题. 一.因为在Manifest.xml文件没有写入<service>,所以导致启动不了Service,但是我明明写了啊.后来发现是自己为了版 ...
如何在Android手机上进行Google Map的开发。
1.题记提起谷歌Map相信大家都不会陌生,那进入我们今天的话题,如何在Android手机上进行Google Map的开发. 2.Map应用程序的开发 2.1 准备工作 2.1.1 申请Android ...
Google Map API 的基础使用
因为公司业务由国内市场到国际市场,有一些国际性业务的项目需要用到Google Map.项目完成后,把一些常用的方法写出来,供大家参考. 一.google地图基础显示 (1)引用google map j ...
在你的Fckeditor安装Google map plugin
Fckeditor是现在很常见的Html编辑器,他好用的地方除了很方便引用外,还有就是他有一大推好用的plug in可以用,像是点部落使用的code highlight,就是plug in上去的功能. ...
Google Map API V3开发（5）
Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...
google map Api接口整理
Google Map Api接口整理一:基本知识: 1. 使用谷歌地图 API 的第一步就是要注册一个 API 密钥,需要注意一下两点: 1.如果使用 API 的页面还没有发布,只是在本地调试,可以 ...

Google Map heatmap

Google Map heatmap相关推荐

最新文章

热门文章