vue.js高德地图实现热点图代码实例


Posted in Javascript onApril 18, 2019

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实现

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'));
  },
}

参考:https://lbs.amap.com/api/javascript-api/example/selflayer/heatmap

以上所述是小编给大家介绍的vue.js高德地图实现热点图详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js给dropdownlist添加选项的小例子
Mar 04 Javascript
jQuery判断密码强度实现思路及代码
Apr 24 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
Apr 29 Javascript
jQuery使用height()获取高度需要注意的地方
Dec 13 Javascript
使用JavaScript开发IE浏览器本地插件实例
Feb 18 Javascript
javascript解决小数的加减乘除精度丢失的方案
May 31 Javascript
利用yarn实现一个webpack+react种子
Oct 25 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
Nov 22 Javascript
js实现产品缩略图效果
Mar 10 Javascript
Webpack如何引入bootstrap的方法
Jun 17 Javascript
Vue.js 2.5新特性介绍(推荐)
Oct 24 Javascript
JavaScript随机数的组合问题案例分析
May 16 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
Apr 18 #Javascript
Vue的H5页面唤起支付宝支付功能
Apr 18 #Javascript
详解Vue中的scoped及穿透方法
Apr 18 #Javascript
Node.js对MongoDB进行增删改查操作的实例代码
Apr 18 #Javascript
Vue 进阶之路(三)
Apr 18 #Javascript
Vue自定义全局Toast和Loading的实例详解
Apr 18 #Javascript
javascript数据类型中的一些小知识点(推荐)
Apr 18 #Javascript
You might like
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
PHP函数学习之PHP函数点评
2012/07/05 PHP
关于查看MSSQL 数据库 用户每个表 占用的空间大小
2013/06/21 PHP
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
PHP 计算两个特别大的整数实例代码
2018/05/07 PHP
PHP attributes()函数讲解
2019/02/03 PHP
优化Jquery,提升网页加载速度
2013/11/14 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
Javascript基础教程之数组 array
2015/01/18 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
高性能的javascript之加载顺序与执行原理篇
2018/01/14 Javascript
JavaScript中Dom操作实例详解
2019/07/08 Javascript
详解JavaScript作用域、作用域链和闭包的用法
2020/09/03 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
Python框架Flask的基本数据库操作方法分析
2018/07/13 Python
Selenium定位元素操作示例
2018/08/10 Python
python 执行终端/控制台命令的例子
2019/07/12 Python
python统计指定目录内文件的代码行数
2019/09/19 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
Python 实现集合Set的示例
2020/12/21 Python
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
美国最大的香水出口:FragranceX.com
2017/11/04 全球购物
电子专业推荐信范文
2013/11/18 职场文书
学生出入校管理制度
2014/01/16 职场文书
硕士学位申请报告
2015/05/15 职场文书
三八红旗手先进事迹材料(2016推荐版)
2016/02/25 职场文书
pytorch中Schedule与warmup_steps的用法说明
2021/05/24 Python
据Python爬虫不靠谱预测可知今年双十一销售额将超过6000亿元
2021/11/11 Python
CI Games宣布《堕落之王2》使用虚幻引擎5制作 预计将于2023年正式发售
2022/04/11 其他游戏