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 实现无干扰阴影效果 简单好用(附文件下载)
Dec 27 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
javascript实现行拖动的方法
May 27 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
Dec 25 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
Feb 12 Javascript
JavaScript实现动态添加Form表单元素的方法示例
Aug 14 Javascript
Vue resource三种请求格式和万能测试地址
Sep 26 Javascript
Angular6 用户自定义标签开发的实现方法
Jan 08 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
May 15 Javascript
vue实现标签云效果的方法详解
Aug 28 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
Sep 10 Javascript
Vue.js实现大屏数字滚动翻转效果
Nov 29 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
全文搜索和替换
2006/10/09 PHP
利用PHP实现智能文件类型检测的实现代码
2011/08/02 PHP
PHP explode()函数用法、切分字符串
2012/10/03 PHP
利用PHP实现短域名互转
2013/07/05 PHP
PHP运行SVN命令显示某用户的文件更新记录的代码
2014/01/03 PHP
关于php unset对json_encode的影响详解
2018/11/14 PHP
非常漂亮的JS代码经典广告
2007/10/21 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
JS 对输入框进行限制(常用的都有)
2013/07/30 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
Jquery 整理元素选取、常用方法一览表
2016/11/26 Javascript
基于jQuery实现火焰灯效果导航菜单
2017/01/04 Javascript
js使用i18n实现页面国际化的方法
2017/05/09 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
浅谈ng-zorro使用心得
2018/12/03 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
使用Python的turtle模块画图的方法
2017/11/15 Python
将pandas.dataframe的数据写入到文件中的方法
2018/12/07 Python
python assert的用处示例详解
2019/04/01 Python
Python+Pyqt实现简单GUI电子时钟
2021/02/22 Python
使用虚拟环境打包python为exe 文件的方法
2019/08/29 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
PyTorch之nn.ReLU与F.ReLU的区别介绍
2020/06/27 Python
浅谈html5与APP混合开发遇到的问题总结
2018/03/20 HTML / CSS
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
英国最受信任的在线眼镜商之一:Fashion Eyewear
2019/10/31 全球购物
linux面试题参考答案(9)
2016/01/29 面试题
J2EE包括哪些技术
2016/11/25 面试题
机械工程系毕业生求职信
2013/09/27 职场文书
教育英语专业毕业生的求职信
2014/03/13 职场文书
党的群众路线教育实践活动对照检查材料范文
2014/09/24 职场文书
党员教师群众路线个人整改措施
2014/10/28 职场文书
python之json文件转xml文件案例讲解
2021/08/07 Python