vue.js高德地图实现热点图

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.jsthis.$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() {//判断浏览区是否支持canvasvar elem = document.createElement('canvas');return !!(elem.getContext && elem.getContext('2d'));},
}

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

vue.js高德地图实现热点图相关推荐

高德地图html js开发例子,vue.js高德地图实现热点图代码实例
1.在index.html引入高德地图JSAPI 2.地图dom 3.js实现 export default { data() {}, methods:{ initMap(){ let map = n ...
前端vue js 高德地图实现雷达扫描加载，借鉴百度地图等方法，采用Canvas解决雷达背景透明度问题，解决Canvas动态指针扫描造成浏览器卡顿问题
前端vue js 高德地图实现雷达扫描加载,借鉴百度地图等方法,采用Canvas解决雷达背景透明度问题,解决Canvas动态指针扫描造成浏览器卡顿问题经过3天的尝试,借鉴了好几个博客的思路,开发了一 ...
VUE+js高德地图2.0API两幅地图联动同步缩放
<template><div><br><div id="container"></div> <!-- <di ...
vue是否可以做行车轨迹_在vue中高德地图引入和轨迹的绘制的实现
高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图,并在main.js中进行全局配置.(百度上有高德地图引入与配置方法,这里就不详细介绍): 1)npm install vue-am ...
vue使用高德地图-进行显示地图和查询天气
vue使用高德地图高德地图显示,实现了天气查询效果(Vue) 在index.html中引入高德地图的css和js vue 插件列表问题解决: 高德地图显示,实现了天气查询效果(Vue) 在ind ...
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使用高德地图api实现热力图动态缩放
Vue使用高德地图api实现热力图动态缩放前言 1.引入高德js 2.显示基本的热力图 3.显示优化 4.Vue页面完整代码前言项目需要,根据积水数据的多少,在页面中进行展示,选用高德热力图ap ...

vue.js高德地图实现热点图

vue.js高德地图实现热点图相关推荐

最新文章

热门文章