調用高德地圖API（熱力圖）詳解
阿新 • • 發佈：2018-08-15
ocs use map asc type contain maps key script
具體腳本語言如下：
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title>熱力圖</title> <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/> <script src="https://webapi.amap.com/maps?v=1.4.9&key=您申請的key值"></script> <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script> <script type="text/javascript" src="//a.amap.com/jsapi_demos/static/resource/heatmapData.js"></script> </head> <body> <div id="container"></div> <div class="button-group"> <input type="button" class="button" value="顯示熱力圖" onclick="heatmap.show()"/> <input type="button" class="button" value="關閉熱力圖" onclick="heatmap.hide()"/> </div> <script> var map = new AMap.Map("container", { resizeEnable: true, center: [116.418261, 39.921984], zoom: 11 }); var points=[ {"lng":"116.32497","lat":"39.96696"}, {"lng":"116.616","lat":"40.053016"}, {"lng":"116.34324","lat":"39.95056"}, {"lng":"116.554131","lat":"39.912131"}, {"lng":"116.3483","lat":"39.83151"}, {"lng":"116.36619","lat":"39.75298"} ]; if (!isSupportCanvas()) { alert(‘熱力圖僅對支持canvas的瀏覽器適用,您所使用的瀏覽器不能使用熱力圖功能,請換個瀏覽器試試~‘) } //詳細的參數,可以查看heatmap.js的文檔 http://www.patrick-wied.at/static/heatmapjs/docs.html //參數說明如下: /* visible 熱力圖是否顯示,默認為true * opacity 熱力圖的透明度,分別對應heatmap.js的minOpacity和maxOpacity * radius 勢力圖的每個點的半徑大小 * gradient {JSON} 熱力圖的漸變區間 . gradient如下所示 * { .2:‘rgb(0, 255, 255)‘, .5:‘rgb(0, 110, 255)‘, .8:‘rgb(100, 0, 255)‘ } 其中 key 表示插值的位置, 0-1 value 為顏色值 */ var heatmap; map.plugin(["AMap.Heatmap"], function() { //初始化heatmap對象 heatmap = new AMap.Heatmap(map, { radius: 25, //給定半徑 opacity: [0, 0.8] /*,gradient:{ 0.5: ‘blue‘, 0.65: ‘rgb(117,211,248)‘, 0.7: ‘rgb(0, 255, 0)‘, 0.9: ‘#ffea00‘, 1.0: ‘red‘ }*/ }); //設置數據集：該數據為北京部分“公園”數據 heatmap.setDataSet({ data: points, max: 100 }); }); //判斷瀏覽區是否支持canvas function isSupportCanvas() { var elem = document.createElement(‘canvas‘); return !!(elem.getContext && elem.getContext(‘2d‘)); } </script> </body> </html>
大家將上述代碼存在一個html文件中，然後通過網頁打開即可。
其中只需要註意
heatmap.setDataSet({
data: points,
max: 1
}中的data：後面的points是你自己的數據，即在之前定義的json格式經緯度
var points=[ {"lng":"116.32497","lat":"39.96696"}, {"lng":"116.616","lat":"40.053016"}, {"lng":"116.34324","lat":"39.95056"}, {"lng":"116.554131","lat":"39.912131"}, {"lng":"116.3483","lat":"39.83151"}, {"lng":"116.36619","lat":"39.75298"} ];
還有就是max的值(即最紅區域對應的次數值)選取自己覺得合適的，不然太小會幾乎一片紅色，太大幾乎看不到熱力圖顏色。
在這裏給大家福利一個將各種格式轉為json文件的小方法：
https://www.bejson.com/json/col2json/
調用高德地圖API（熱力圖）詳解