高德地圖 Javascript API 入門（七）

高德地圖 Javascript API 入門（七）

熱力圖插件

簡單例子

// 顯示地圖
var map=new AMap.Map("container",{
    resizeEnable:true,
    center:[116.397428, 39.90923],
    zoom:11
});
// 座標點
var points =[
    {"lng":116.191031,"lat":39.988585,"count":100},
    {"lng":116.389275,"lat":39.925818,"count":60},
    {"lng":116.287444,"lat":39.810742,"count":200},
    {"lng":116.481707,"lat":39.940089,"count":30},
    {"lng":116.410588,"lat":39.880172,"count":200},
    {"lng":116.394816,"lat":39.91181,"count":10},
    {"lng":116.416002,"lat":39.952917,"count":150}
];
// 加載熱力圖插件
map.plugin(["AMap.Heatmap"],function () {
     var heatmap=new AMap.Heatmap(map,{
        radius:50
    });
    heatmap.setDataSet({
           data:points,
        max:100
       });
)};

預覽

參數

AMap.Heatmap

構造函數	說明
AMap.Heatmap(map:Map,opts:HeatmapOptions)	構造一個熱力圖插件對象，map爲要疊加熱力圖的地圖對象，opts屬性參考HeatmapOptions列表中的說明。

options

HeatmapOptions	類型	說明
radius	Number	熱力圖中單個點的半徑，默認：30，單位：pixel
gradient	Object	熱力圖的漸變區間，熱力圖按照設置的顏色及間隔顯示熱力圖，例： { 0.4:'rgb(0, 255, 255)', 0.65:'rgb(0, 110, 255)', 0.85:'rgb(100, 0, 255)', 1.0:'rgb(100, 0, 255)' } 其中 key 表示間隔位置，取值範圍： [0,1]，value爲顏色值。默認：heatmap.js標準配色方案
opacity	Array	熱力圖透明度數組，取值範圍[0,1]，0表示徹底透明，1表示不透明，默認：[0,1]
zooms	Array	支持的縮放級別範圍，取值範圍[3-18]，默認：[3,18]

------ 參考來源： http://lbs.amap.com/ 做者： Yangfan