一、前置條件
需先申請高德地圖key，https://lbs.amap.com/
二、引入高德api
<script src="//webapi.amap.com/maps?v=1.4.15&key=您申請的key值"></script>
<script src="//a.amap.com/jsapi_demos/static/resource/heatmapData.js"></script>
三、了解熱力圖數據結構
data: [{lng: 116.405285, lat: 39.904989, count: 65},{}, …]
字段含義：
lng 經度，lat 緯度，count 出現次數
在實際應用中，可以GeoHash對 經緯度坐標進行編碼，減小數據包大小
四、了解熱力圖參數和方法
1.setDataSet(dataset:Object)
用於設置熱力圖展現的數據集，dataset數據集格式為：
{
max: Number 權重的最大值,
data: Array 坐標數據集
}
2.show()
顯示熱力圖
3.hide()
隱藏熱力圖
4.radius
熱力圖中單個點的半徑，默認：30，單位：pixel；半徑范圍內所有的點都會算作此點的數目，比如30px范圍內有兩個點，一個點的count是12，另一個是18，渲染是會將兩個點算成一個點，其count值為30
5.max
代表熱點圖區分熱度的界限，當某點count數超過max一定比例，即顯示對應gradient配置的顏色,點的count值決定了它在grident中的顏色
6.gradient
熱力圖的漸變區間，熱力圖按照設置的顏色及間隔顯示熱力圖；若不設置，就會使用heatmap.js標准配色方案
heatmap.js標准配色方案：
{
0.5: "blue",
0.65: "rgb(117,211,248)",
0.7: "rgb(0, 255, 0)",
0.9: "#ffea00",
1: "red"
}
五、實現頁面：
1.初始化地圖時，獲取用戶位置，展示用戶當前城市熱力圖
2.切換城市時，獲取該城市熱力圖數據
3.控制熱力圖的顯示與隱藏
4.當某個城市無熱力圖數據時，隱藏按鈕；反之，則顯示按鈕
5.max得合理取值，太小會幾乎一片紅色，太大幾乎看不到熱力圖顏色，在此項目中max取城市中所有點count平均值
1 <template> 2 <div class="map-wrap"> 3 <div id="container-city"></div> 4 <div class="input-city"> 5 <Select 6 v-model="modelCity" 7 allow-create 8 @on-change="getHeatData($event)" 9 placeholder="請選擇城市" 10 :label-in-value="true" 11 > 12 <!-- 選中的Option變化時觸發，默認返回 value，可以設置 :label-in-value="true" 返回 label --> 13 <Option v-for="item in cityList" :value="item.cityNo" :key="item.cityNo">{{ item.cityName }}</Option> 14 </Select> 15 </div> 16 <div class="input-card"> 17 <button @click="heatmapIfShow" v-if="heatmapShow" :class="isHeatClose"> 18 <span class="check-mark">√</span> 19 <img src="@/assets/heatmap.png" width="60px" height="50px" /> 20 </button> 21 </div> 22 </div> 23 </template> 24 25 <script> 26 import heatList from "../../public/heatmap.json"; 27 import citylist from "../../public/cityList.json"; 28 export default { 29 name: "stationMap", 30 data() { 31 return { 32 amap: {}, 33 heatmap: {}, 34 heatmapShow: false, 35 isHeatClose: "", 36 cityList: [], 37 modelCity: "" 38 }; 39 }, 40 mounted() { 41 let _this = this; 42 this.getCity(); // 獲取城市下拉框數據 43 this.amap = new AMap.Map("container-city", { 44 zoom: 11, 45 zooms: [3, 20], 46 expandZoomRange: true //當expandZoomRange為true時，zooms的最大級別在PC上可以擴大到20級 47 }); 48 // 獲取當前城市 49 AMap.plugin('AMap.CitySearch', function () { 50 var citySearch = new AMap.CitySearch() 51 citySearch.getLocalCity(function (status, result) { 52 if (status === 'complete' && result.info === 'OK') { 53 _this.amap.setCity(result.city); 54 _this.modelCity = _this.getCityNo(result.city); 55 _this.getHeatData({value: _this.modelCity,label: result.city}) 56 } 57 }) 58 }) 59 // 熱力圖插件 60 AMap.plugin(["AMap.Heatmap"], () => { 61 //初始化heatmap對象 62 this.heatmap = new AMap.Heatmap(this.amap, { 63 radius: 25, //給定半徑 64 opacity: [0, 0.8] 65 }); 66 }); 67 }, 68 methods: { 69 // 熱力圖的顯示與隱藏 70 heatmapIfShow() { 71 if (this.isHeatClose == "") { 72 this.isHeatClose = "closem"; 73 this.heatmap.hide(); 74 } else { 75 this.isHeatClose = ""; 76 this.heatmap.show(); 77 } 78 }, 79 getCity() { 80 // 實際項目中，需要通過http請求獲取數據 81 this.cityList = citylist.cityList || {}; 82 }, 83 getHeatData(event) { 84 let cityName = event.label; 85 let cityNo = event.value; 86 this.amap.setCity(cityName); 87 // 獲取所查詢城市的熱力圖數據，實際項目中，需要通過http請求獲取數據 88 let cityHeatList = heatList[cityNo] || []; 89 //當某個城市熱力圖數據為空時 90 if (cityHeatList.length === 0) { 91 this.heatmapShow = false; 92 this.heatmap.setDataSet({ 93 data: [] 94 }); 95 return; 96 } 97 let sum = cityHeatList.reduce((prev, curr) => { 98 if (typeof prev == "object") { 99 return prev.count + curr.count; 100 } 101 return prev + curr.count; 102 }); 103 let max = sum / cityHeatList.length; //平均值 104 this.heatmap.setDataSet({ 105 data: cityHeatList, 106 max: max // 代表熱點圖區分熱度的界限，當某點count數超過max一定比例，即顯示對應gradient配置的顏色,點的count值決定了它在grident中的顏色。 107 }); 108 this.heatmapShow = true; 109 this.isHeatClose = ""; 110 this.heatmap.show(); 111 }, 112 //通過城市名獲取城市編號 113 getCityNo(cityName){ 114 return this.cityList.find(vaule => (cityName == vaule.cityName)).cityNo || ''; 115 } 116 } 117 }; 118 </script>