vue.js高德地圖實(shí)現(xiàn)熱點(diǎn)圖代碼實(shí)例
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實(shí)現(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('熱力圖僅對(duì)支持canvas的瀏覽器適用,您所使用的瀏覽器不能使用熱力圖功能,請(qǐng)換個(gè)瀏覽器試試~') } 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對(duì)象 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高德地圖實(shí)現(xiàn)熱點(diǎn)圖詳解整合,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
vue-cli項(xiàng)目如何使用vue-resource獲取本地的json數(shù)據(jù)(模擬服務(wù)端返回?cái)?shù)據(jù))
這篇文章主要介紹了vue-cli項(xiàng)目如何使用vue-resource獲取本地的json數(shù)據(jù)(模擬服務(wù)端返回?cái)?shù)據(jù)),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08vue element 表頭添加斜線的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue element 表頭添加斜線的實(shí)現(xiàn)代碼,代碼簡單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-11-11基于Vue+Webpack拆分路由文件實(shí)現(xiàn)管理
這篇文章主要介紹了基于Vue+Webpack拆分路由文件實(shí)現(xiàn)管理,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11關(guān)于this.$refs獲取不到dom的可能原因及解決方法
這篇文章主要介紹了關(guān)于this.$refs獲取不到dom的可能原因及解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11關(guān)于vue項(xiàng)目一直出現(xiàn) sockjs-node/info?t=XX的解決辦法
sockjs-node 是一個(gè)JavaScript庫,提供跨瀏覽器JavaScript的API,創(chuàng)建了一個(gè)低延遲、全雙工的瀏覽器和web服務(wù)器之間通信通道,這篇文章主要介紹了vue項(xiàng)目一直出現(xiàn) sockjs-node/info?t=XX的解決辦法,需要的朋友可以參考下2023-12-12vue項(xiàng)目keepAlive配合vuex動(dòng)態(tài)設(shè)置路由緩存方式
vue項(xiàng)目keepAlive配合vuex動(dòng)態(tài)設(shè)置路由緩存方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04使用idea創(chuàng)建vue項(xiàng)目的圖文教程
Vue.js是一套構(gòu)建用戶界面的框架,只關(guān)注視圖層,它不僅易于上手,還便于與第三方庫或既有項(xiàng)目整合,下面這篇文章主要給大家介紹了關(guān)于使用idea創(chuàng)建vue項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2022-08-08