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 相关文章推荐
Div Select挡住的解决办法
Aug 07 Javascript
javascript 关于# 和 void的区别分析
Oct 26 Javascript
获取3个数组不重复的值的具体实现
Dec 30 Javascript
理解javascript中的MVC模式
Jan 28 Javascript
javascript禁止超链接跳转的方法
Feb 02 Javascript
深入理解Node.js中的进程管理
Mar 13 Javascript
使用 vue-i18n 切换中英文效果
May 23 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
Sep 13 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
Feb 18 Javascript
微信小程序云开发之数据库操作
May 18 Javascript
JS实现拼图游戏
Jan 29 Javascript
原生js拖拽实现图形伸缩效果
Feb 10 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
php提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别
2011/02/08 PHP
php中关于普通表单多文件上传的处理方法
2011/03/25 PHP
解析thinkphp import 文件内容变量失效的问题
2013/06/20 PHP
php mb_substr()函数截取中文字符串应用示例
2014/07/29 PHP
PHP微信发送推送消息乱码的解决方法
2019/02/28 PHP
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
2010/07/24 Javascript
javascript对数组的常用操作代码 数组方法总汇
2011/01/27 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
2014/10/20 Javascript
dreamweaver 8实现Jquery自动提示
2014/12/04 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
漫谈JS引擎的运行机制 你应该知道什么
2016/06/15 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
2017/01/16 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
js实现拖拽功能
2017/03/01 Javascript
angularjs实现下拉列表的选中事件示例
2017/03/03 Javascript
理解 javascript 中的函数表达式与函数声明
2017/07/07 Javascript
详解.vue文件中监听input输入事件(oninput)
2017/09/19 Javascript
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
JavaScript笛卡尔积超简单实现算法示例
2018/07/30 Javascript
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
2020/07/17 Javascript
Python PIL读取的图像发生自动旋转的实现方法
2019/07/05 Python
python 追踪except信息方式
2020/04/25 Python
美国定制钻石订婚戒指:Ritani
2017/12/08 全球购物
祖国在我心中演讲稿400字
2014/05/04 职场文书
投资入股合作协议书
2014/10/28 职场文书
2015社区健康教育工作总结
2015/05/20 职场文书
领导视察通讯稿
2015/07/18 职场文书
2016七夕情人节广告语
2016/01/28 职场文书
演讲开头怎么书写?
2019/08/06 职场文书
浅谈Node的内存泄露问题
2022/05/06 NodeJs
SQL Server2019安装的详细步骤实战记录(亲测可用)
2022/06/10 SQL Server