vue.js高德地圖實現(xiàn)熱點圖代碼實例
1.在index.html引入高德地圖JSAPI
<script src="https://webapi.amap.com/maps?v=1.3&key=xxx"></script>
2.地圖dom
<div class="map-container"> <div id="container" style="width:100%;height:500px"></div> </div>
3.js實現(xiàn)
export default { data() {}, methods:{ initMap(){ let map = new AMap.Map('container', { features: ['bg', 'road'], resizeEnable: true, center: [116.397428, 39.90923], zoom: 11, viewMode: '2D', pitch: 50, showZoomBar:true, }); if (!this.isSupportCanvas()) { this.$Message.info('熱力圖僅對支持canvas的瀏覽器適用,您所使用的瀏覽器不能使用熱力圖功能,請換個瀏覽器試試~') } let heatmap; let heatmapData=[]; //從接口獲取數(shù)據(jù) //官網(wǎng)示例數(shù)據(jù)結(jié)構(gòu) http://a.amap.com/jsapi_demos/static/resource/heatmapData.js this.$axios.get("/map/data").then(res => { if(res.success) { if(res.data){ res.data.forEach(item=>{ let obj={ lng:item.longitude, lat:item.latitude, count:item.count, } heatmapData.push(obj); }) 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' } }); //設(shè)置數(shù)據(jù)集 heatmap.setDataSet({ data: heatmapData, max: 5 }); }); }else{ heatmapData =[]; } } else { heatmapData =[]; } }); } }, isSupportCanvas() {//判斷瀏覽區(qū)是否支持canvas var elem = document.createElement('canvas'); return !!(elem.getContext && elem.getContext('2d')); }, }
參考:https://lbs.amap.com/api/javascript-api/example/selflayer/heatmap
以上所述是小編給大家介紹的vue.js高德地圖實現(xiàn)熱點圖詳解整合,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
vue-cli項目如何使用vue-resource獲取本地的json數(shù)據(jù)(模擬服務(wù)端返回數(shù)據(jù))
這篇文章主要介紹了vue-cli項目如何使用vue-resource獲取本地的json數(shù)據(jù)(模擬服務(wù)端返回數(shù)據(jù)),具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-08-08關(guān)于this.$refs獲取不到dom的可能原因及解決方法
這篇文章主要介紹了關(guān)于this.$refs獲取不到dom的可能原因及解決方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11關(guān)于vue項目一直出現(xiàn) sockjs-node/info?t=XX的解決辦法
sockjs-node 是一個JavaScript庫,提供跨瀏覽器JavaScript的API,創(chuàng)建了一個低延遲、全雙工的瀏覽器和web服務(wù)器之間通信通道,這篇文章主要介紹了vue項目一直出現(xiàn) sockjs-node/info?t=XX的解決辦法,需要的朋友可以參考下2023-12-12vue項目keepAlive配合vuex動態(tài)設(shè)置路由緩存方式
vue項目keepAlive配合vuex動態(tài)設(shè)置路由緩存方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04