最简单的地图热力图,用的是百度的api,所以取经纬度的时候最好也用百度地图。
这里已经填好百度api的key了,但还是建议大家注册使用自己的key,因为有每日额度,超过访问次数了就不可用了。
效果展示:
下面是完整代码,注释已经标得很清楚了,直接保存为html文件用浏览器打开就可以了。
XXXXXul,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%;}
// 百度地图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": 41, "lat": 34.7717129219314, "lng":113.759384084863},
{"count": 19, "lat": 28.2348893999436, "lng":112.945473195352},
{"count": 32, "lat": 29.3631782939259, "lng":113.135489424221},
{"count": 4, "lat": 27.2452702728085, "lng":111.474432885931},
{"count": 35, "lat": 29.0377499994068, "lng":111.705452179958},
{"count": 70, "lat": 27.7032085969915, "lng":112.001503492884},
{"count": 87, "lat": 27.8335676390164, "lng":113.140470797764},
{"count": 85, "lat": 26.8995761391891, "lng":112.578447213259},
{"count": 67, "lat": 28.5597111784898, "lng":112.36151595471},
{"count": 19, "lat": 26.4258641179, "lng":111.619455057922},
{"count": 7, "lat": 27.5751609029785, "lng":110.008514265372},
{"count": 99, &#