高德地图html js开发例子,vue.js高德地图实现热点图代码实例

1.在index.html引入高德地图JSAPI

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高德地图实现热点图详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

高德地图html js开发例子,vue.js高德地图实现热点图代码实例相关推荐

分享Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站
这是个什么的项目? 使用 Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站. 博客线上地址:www.boblog.com Github地址:https: ...
react.js开发_2020 React.js开发人员路线图
react.js开发成为阅读JS开发人员的插图指南,其中包含相关课程的链接 React JS或简称React是用于开发Web应用程序的前端或GUI的领先JavaScript库之一. 在Faceboo ...
# vue.js 之对vue.js基础理解
vue.js 之对vue.js基础理解 Vue构造器 1 . Vue.js是一个构造函数,编程中称之为构造器 2 . 每一个new Vue() 都是一个Vue构造函数的实例,这个过程叫做实例化 3 ...
前端开发工具vue.js开发实践总结
最近有很长时间没有更新博客了,换了公司,全部的心思都放在项目上了.通过这次项目的上线,让我感受最深的是前后端分离后,前端页面的模块化管理,以及前端页面的数据邦定.在接触vue.js之前,我之前端要用到 ...
为什么说Web开发和Vue.js是如此的有趣？
2019独角兽企业重金招聘Python工程师标准>>> 我想告诉你,我开始享受使用Vue.js和进行前端开发的故事.这不应该被理解为一篇关于为什么Vue.js可能比React,Ang ...
[WEB地图] 2017高德地图API WEB开发（key申请，地图搭建）简约教程
前端时间因为公司需要研究了一下百度的教程然后写个简约的笔记记录一下自己学习的收获,只为了满足自己暂时的写作热情高德地图WEB开发(key申请.api)简约教程 1.首先我们需要去"高德 ...
Vue.js-Day01-PM【事件绑定(事件传参、事件对象、传参+获取事件对象)、样式处理操作(模板、事件、属性绑定)、Tab切换(原生js实现、Vue.js实现)、js中的this详解关键字】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 4.事件绑定 4.1.事件绑定(点击.双击.鼠标移动) 点击按钮-最简单的事件绑定(无参函数) 格式点击按钮 ...
【Vue.JS】纯 Vue.js 制作甘特图
效果图在线预览 GitHub链接(包含 knockoutJS 版本与 Vue 版本) 推荐组合效果推荐与双表头固定效果组合,实现如上例中横表头(日期)纵向固定,纵表头(类型)横向固定效果. 参照连 ...
vue.js报错 vue.js:597 [Vue warn]: Cannot find element: #app
刚开始使用vue的时候发现vue报vue.js:597 [Vue warn]: Cannot find element: #app的错误,初始以为是写的代码有错误导致,于是认真的对照了几遍发现代码和官 ...

高德地图html js开发例子,vue.js高德地图实现热点图代码实例

高德地图html js开发例子,vue.js高德地图实现热点图代码实例相关推荐

最新文章

热门文章