1.在index.html引入高德地图JSAPI
<script src="https://webapi.amap.com/maps?v=1.3&key=xxx"></script>
2.地图dom
3.js实现
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=[]; //从接口获取数据 //官网示例数据结构 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" } }); //设置数据集 heatmap.setDataSet({ data: heatmapData, max: 5 }); }); }else{ heatmapData =[]; } } else { heatmapData =[]; } }); } }, isSupportCanvas() {//判断浏览区是否支持canvas var elem = document.createElement("canvas"); return !!(elem.getContext && elem.getContext("2d")); }, }
[高德地高德地图下载]vue.js高德地图实现热点图代码实例
http://m.bbyears.com/wangyezhizuo/162853.html
推荐访问:下载高德地 高德地高德地地图