VUE项目高德地图使用热力图--实例

效果图

代码

在public/index.html中加入：

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

xxx.vue 页面完整代码

<template><div class="box"><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 '@/assets/js/heatmapData'; export default {data() {return {map: null,heatmap: null};},mounted() {// 延迟加载，防止出现AMap not definedsetTimeout(() => {this.initMap();this.createHeatMap();}, 1000);},beforeDestroy() {this.map && this.map.destroy();},methods: {initMap() {this.map = new AMap.Map("container", {resizeEnable: true,center: [116.480983, 39.989628],zoom: 11,mapStyle: 'macaron', // 马卡龙(其他样式可在高德api中查找进行修改)//自定义地图样式：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.$message({message: '热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试。',type: 'warning'});}let __this = this;this.map.plugin(["AMap.Heatmap"], function() {//初始化heatmap对象__this.heatmap = new AMap.Heatmap(__this.map, {radius: 25, //给定半径opacity: [0, 0.8],});//设置数据集：该数据为北京部分“公园”数据__this.heatmap.setDataSet({data: heatmapData,max: 100});});}}
};
</script><style scoped>
@import url("https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css");.box{width: 100%;height: 600px;border-radius: 12px;background: #fff;
}
#container {margin: 0;padding: 0;width: 100%;height: 100%;
}
</style>

VUE项目高德地图使用热力图--实例相关推荐

vue项目高德地图Mixed Content: The page at ‘https://****.com/cockpit/‘ was loaded over HTTPS, b
vue项目高德地图引入https相关报错 vue项目中高德地图引入相关问题原因和解决方案 vue项目中高德地图引入相关问题公司年前一个vue项目一期,其中有个数据可视化模块引入了高德地图,年前发布 ...
Vue使用高德地图api实现热力图动态缩放
Vue使用高德地图api实现热力图动态缩放前言 1.引入高德js 2.显示基本的热力图 3.显示优化 4.Vue页面完整代码前言项目需要,根据积水数据的多少,在页面中进行展示,选用高德热力图ap ...
高德地图html js开发例子,vue.js高德地图实现热点图代码实例
1.在index.html引入高德地图JSAPI 2.地图dom 3.js实现 export default { data() {}, methods:{ initMap(){ let map = n ...
vue使用高德地图小demo（标记点，画线，3D，叠加图片图层）
vue使用高德地图小demo(标记点,画线,3D) 这个模式是3D的,可以看到地图是带有一定的倾角的. 注意:3D模式下,是不能够将进行画线的,不能使用PathSimplifier,改成2D可以正常使 ...
vue使用高德地图aMap实现轨迹动画查询显示
vue使用高德地图搜索地址添加标记marker,定位,拖拽选址功能https://blog.csdn.net/SmartJunTao/article/details/123955679 实现效果: 需 ...
vue调用高德地图实现定位
vue调用高德地图实现定位第一步创建高德地图key 第二步:下载vue-amap npm install vue-amap --save 第三步:在项目main.js引入vue-amap impor ...
vue使用高德地图-进行显示地图和查询天气
vue使用高德地图高德地图显示,实现了天气查询效果(Vue) 在index.html中引入高德地图的css和js vue 插件列表问题解决: 高德地图显示,实现了天气查询效果(Vue) 在ind ...
Vue 引入高德地图 vue-amap
一.在高德开发平台,获取Key(已有可跳过): 高德开发者平台-链接地址 1.控制台--我的应用--创建应用--添加key 创建应用新建应用选择web端(JS平台) last:到这里的 key ...
vue引用高德地图实现选择定位，根据经纬度标注功能
引用vue-amap yarn add vue-amap main配置 // 引入vue-amap import VueAMap from 'vue-amap';Vue.use(VueAMap);// ...
Ant design Of Vue vue-amap 高德地图选点组件
参考链接: Vue(vue-amap) 接入高德地图获取坐标与地址信息 'AMapUI' is not defined 异常的话按照这个处理,没有异常就可以不用看 tips1: 本组件直接将main ...

VUE项目高德地图使用热力图--实例

效果图

代码

VUE项目高德地图使用热力图--实例相关推荐

最新文章

热门文章

VUE项目 高德地图使用热力图--实例

效果图

代码

VUE项目 高德地图使用热力图--实例相关推荐

最新文章

热门文章

VUE项目高德地图使用热力图--实例

VUE项目高德地图使用热力图--实例相关推荐