VUE调用高德地图之热力图

上次用VUE实现了高德地图的轨迹回放，现在来实现热力图功能。
照例，第一步：
加载JS AP

在public/index.html中加入：

<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&callback=init"></script>

将官方demo转换为vue代码

放置地图
初始化map对象
生成热力图map

完整代码如下：

<template><div><div id="container"></div><div class="input-card" style="width: auto;"><div class="input-item"><button class="btn" @click="heatmap.show()">显示热力图</button></div><div class="input-item"><button class="btn" @click="heatmap.hide()">关闭热力图</button></div></div></div>
</template><script>
// https://a.amap.com/jsapi_demos/static/resource/heatmapData.js
import {heatmapData} from './heatmapData';
export default {mounted() {// 延迟加载，防止出现AMap not definedsetTimeout(() => {this.initMap();this.createHeatMap();}, 1000);},beforeDestroy() {this.map && this.map.destroy();},data() {return {map: null,heatmap: null};},methods: {initMap() {this.map = new AMap.Map("container", {resizeEnable: true,center: [116.480983, 39.989628],zoom: 11,mapStyle: 'amap://styles/grey', // 极夜蓝//自定义地图样式：https://lbs.amap.com/dev/mapstyle/index});},//判断浏览区是否支持canvasisSupportCanvas() {let elem = document.createElement("canvas");return !!(elem.getContext && elem.getContext("2d"));},createHeatMap() {if (!this.isSupportCanvas()) {return this.$msg.error("热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试。");}let __this = this;this.map.plugin(["AMap.Heatmap"], function() {//初始化heatmap对象__this.heatmap = new AMap.Heatmap(__this.map, {visible: false,radius: 25, //给定半径opacity: [0, 0.8],});//设置数据集：该数据为北京部分“公园”数据__this.heatmap.setDataSet({data: heatmapData,max: 100});});}}
};
</script><style lang="less" scoped>
@import url("https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css");#container {margin: 0;padding: 0;width: 100%;height: 500px;
}
.input-card .btn {margin-right: 1.2rem;width: 9rem;
}
</style>

启动项目，一切正常！

VUE调用高德地图之热力图相关推荐

vue调用高德地图实现定位
vue调用高德地图实现定位第一步创建高德地图key 第二步:下载vue-amap npm install vue-amap --save 第三步:在项目main.js引入vue-amap impor ...
VUE调用高德地图之电子围栏
之前用VUE实现了高德地图的历史轨迹回放和热力图,现在来实现电子围栏功能. 所谓电子围栏,就是地图上限定的区域内实现限行功能,用我们身边的事物来举例,共享单车的限行.限停区域就是电子围栏.由此可见,电 ...
Vue使用高德地图api实现热力图动态缩放
Vue使用高德地图api实现热力图动态缩放前言 1.引入高德js 2.显示基本的热力图 3.显示优化 4.Vue页面完整代码前言项目需要,根据积水数据的多少,在页面中进行展示,选用高德热力图ap ...
vue项目中调用高德地图vue-amap 插件的AMap.PlaceSearch简用
vue项目调用高德地图vue-amap 插件的AMap.PlaceSearch简用结合 elementui 的 el-input 直接下拉选取地点不展示地图 1.下载 npm install v ...
vue使用高德地图-进行显示地图和查询天气
vue使用高德地图高德地图显示,实现了天气查询效果(Vue) 在index.html中引入高德地图的css和js vue 插件列表问题解决: 高德地图显示,实现了天气查询效果(Vue) 在ind ...
vue使用高德地图aMap实现轨迹动画查询显示
vue使用高德地图搜索地址添加标记marker,定位,拖拽选址功能https://blog.csdn.net/SmartJunTao/article/details/123955679 实现效果: 需 ...
JS 如何调用高德地图
最近配合后台做管理系统,需要前端用原生html页面嵌入到后台,于是乎...记录下原生JS怎么使用高德地图吧一.获取高德地图的key 获取地址:高德开放平台https://lbs.amap.com/ ...
高德地图html js开发例子,vue.js高德地图实现热点图代码实例
1.在index.html引入高德地图JSAPI 2.地图dom 3.js实现 export default { data() {}, methods:{ initMap(){ let map = n ...
高德地图api接口文档_在 R 语言里面调用高德地图接口：地理编码与路径规划
你知道从广州南站去珠江新城怎么走么?今天就让我们一起使用 R 语言调用高德地图的地理编码(地址转经纬度)接口和路径规划接口来回答这个问题. 准备工作注册高德地图,创建应用添加 Key(注意申请 Ke ...
python调用高德地图api 可视化_Python：利用高德地图API实现找房
记:本项目是在实验楼上看到的,但是上面的代码由于没有及时维护,爬虫文件的代码不再能完整的把所有房源信息爬取下来,我根据最新的58同城官网进行了研究,现在的官网的房源信息已经不是分页的了,而是拉到最后自 ...

VUE调用高德地图之热力图

VUE调用高德地图之热力图相关推荐

最新文章

热门文章