【热力图】区域地图热力图，百度地图api

最新推荐文章于 2024-06-27 16:23:14 发布

HelenLee01

最新推荐文章于 2024-06-27 16:23:14 发布

阅读量9k

点赞数 8

分类专栏：前端文章标签：热力图地图 html

本文链接：https://blog.csdn.net/weixin_43289135/article/details/104244673

版权

最简单的地图热力图，用的是百度的api，所以取经纬度的时候最好也用百度地图。

这里已经填好百度api的key了，但还是建议大家注册使用自己的key，因为有每日额度，超过访问次数了就不可用了。

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=VNekEeQpPj7NhVX9jxcjiC1onpZUNToQ"></script>

效果展示：

下面是完整代码，注释已经标得很清楚了，直接保存为html文件用浏览器打开就可以了。

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name ="viewport" content ="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=VNekEeQpPj7NhVX9jxcjiC1onpZUNToQ"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
  <title>XXXXX</title>
  <style type="text/css">
		ul,li{list-style: none;margin:0;padding:0;float:left;}
		html{height:100%}
		body{height:100%;margin:0px;padding:0px;font-family:"微软雅黑";}
		#allmap{height:100%;width:100%;}
    </style>
</head>
<body>
  <div id="allmap"></div>
</body>
</html>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
  // 百度地图API功能
  var map = new BMap.Map("allmap");
//设置打开后的中心位置，这里设置的是北京
  var point = new BMap.Point(116.512885,39.847469);
//设置打开后的缩放大小，这里设置的大致为中国版图的大小
  map.centerAndZoom(point, 5);
  // 编写自定义函数,创建标注
  function addMarker(point){
    var marker = new BMap.Marker(point);
    map.addOverlay(marker);
  }
//lat是纬度，lng是经度，count是对应的数值大小
//下列的经纬度基本覆盖了中国各个省份及重要城市
  var res = [{"count": 61, "lat": 30.5984667364009, "lng":114.311581554732},
{"count": 18, "lat": 30.9306892270182, "lng":113.922510077336},
{"count": 70, "lat": 30.4593588576181, "lng":114.878490484107},
{"count": 2, "lat": 31.6965167723283, "lng":113.389450018221},
{"count": 47, "lat": 30.3408421077429, "lng":112.245522629261},
{"count": 59, "lat": 32.0147968046692, "lng":112.128537201002},
{"count": 86, "lat": 30.2052078489415, "lng":115.045532908943},
{"count": 33, "lat": 30.6974464844923, "lng":111.292549210354},
{"count": 24, "lat": 31.0417325755696, "lng":112.20639298023},
{"count": 68, "lat": 30.3965721733169, "lng":114.90160738827},
{"count": 57, "lat": 29.8470559476464, "lng":114.328519090268},
{"count": 41, "lat": 32.6350618584011, "lng":110.804529560695},
{"count": 76, "lat": 30.3335877511463, "lng":113.449609358563},
{"count": 4, "lat": 30.6696218300994, "lng":113.172409166328},
{"count": 10, "lat": 30.277939575301, "lng":109.494592618575},
{"count": 38, "lat": 30.4083579324189, "lng":112.905474090816},
{"count": 76, "lat": 31.7504960112464, "lng":110.682524850399},
{"count": 90, "lat": 30.5516000646583, "lng":114.348440736587},
{"count": 84, "lat": 22.5484566379841, "lng":114.064551836587},
{"count": 57, "lat": 23.135336306695, "lng":113.271431344459},
{"count": 59, "lat": 22.2765646542492, "lng":113.582554786549},
{"count": 76, "lat": 23.0277587507889, "lng":113.128512195497},
{"count": 58, "lat": 23.0273084116433, "lng":113.758420457876},
{"count": 52, "lat": 22.5223146707905, "lng":113.399422362631},
{"count": 36, "lat": 23.1163588547255, "lng":114.423558016581},
{"count": 99, "lat": 23.3590917177251, "lng":116.688528640548},
{"count": 99, "lat": 21.276723439012, "lng":110.365554413928},
{"count": 30, "lat": 23.0528887711256, "lng":112.47148894063},
{"count": 78, "lat": 22.584603880965, "lng":113.08855619524},
{"count": 96, "lat": 21.8643397261389, "lng":111.988489291812},
{"count": 70, "lat": 24.2941775322062, "lng":116.129537376122},
{"count": 4, "lat": 23.688230292088, "lng":113.062468325272},
{"count": 23, "lat": 23.5557404882755, "lng":116.378512180338},
{"count": 60, "lat": 21.669064031332, "lng":110.931542579969},
{"count": 40, "lat": 24.815881278583, "lng":113.603527345622},
{"count": 7, "lat": 22.7912630365467, "lng":115.38155260365},
{"count": 63, "lat": 23.6626231926158, "lng":116.629470173628},
{"count": 22, "lat": 23.7496843709597, "lng":114.707446272906},
{"count": 77, "lat": 28.0010854044722, "lng":120.706476890355},
{"count": 70, "lat": 30.2530829816934, "lng":120.215511803721},
{"count": 96, "lat": 29.866033045866, "lng":121.628572494341},
{"count": 64, "lat": 28.6621940559961, "lng":121.427434704279},
{"count": 62, "lat": 29.0846393855136, "lng":119.653436190529},
{"count": 33, "lat": 30.7509748309201, "lng":120.76355182586},
{"count": 98, "lat": 30.0363693113069, "lng":120.585478478853},
{"count": 17, "lat": 28.4732781805634, "lng":119.929573058441},
{"count": 37, "lat": 28.975545802265, "lng":118.866596740355},
{"count": 80, "lat": 30.8989639372941, "lng":120.094516609157},
{"count": 76, "lat": 29.9909116801603, "lng":122.21355631852},
{"count": 62, "lat": 32.153014547531, "lng":114.097482833045},
{"count": 75, "lat": 32.9965622046514, "lng":112.534501313513},
{"count": 2, "lat": 34.7534388504544, "lng":113.631419207339},
{"count": 24, "lat": 33.0178424167436, "lng":114.028470781732},
{"count": 84, "lat": 34.4202016658586, "lng":115.662449338262},
{"count": 20, "lat": 33.6318288757022, "lng":114.703482514823},
{"count": 45, "lat": 33.772050748691, "lng":113.199528560521},
{"count": 14, "lat": 35.3096399303368, "lng":113.933600467332},
{"count": 19, "lat": 36.1059409840149, "lng":114.399500421774},
{"count": 73, "lat": 34.0414316116187, "lng":113.858475536855},
{"count": 90, "lat": 33.5877107071022, "lng":114.023420777647},
{"count": 81, "lat": 34.6242627792194, "lng":112.459421298311},
{"count": 26, "lat": 34.8028858112117, "lng":114.314592584971},
{"count": 26, "lat": 35.2209632540389, "lng":113.248547834573},
{"count": 63, "lat": 35.7523574114, "lng":114.303593642476},
{"count": 87, "lat": 34.7783272494599, "lng":111.206533223874},
{"count": 26, "lat": 35.7675930289062, "lng":115.035597470342},
{"count": 29, "lat": 35.0729072268465, "lng":112.608580706207},
{"count&#

最低0.47元/天解锁文章

HelenLee01

关注

8
点赞
踩
40

收藏

觉得还不错? 一键收藏
4
评论
【热力图】区域地图热力图，百度地图api

最简单的地图热力图，用的是百度的api，所以取经纬度的时候最好也用百度地图。这里已经填好百度api的key了，但还是建议大家注册使用自己的key，因为有每日额度，超过访问次数了就不可用了。<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=VNekEeQpPj7NhVX9jxcj...
复制链接

扫一扫

专栏目录