1、
mounted() {
this.init1()
},
2、
init1() {
const This = this
//实例化地图
const map = new AMap.Map('container', {
resizeEnable: true,
zoom: This.cpInfo.zoom,
zooms: [3, 17],
mapStyle: 'amap://styles/blue', 默认地图样式(normal)靛青蓝blue
center: This.cpInfo.center
})
//我用的是高德2.0,有的文章里写的是AMap.Heatmap,控制台会报错,要求第二个m也是大写,AMap.HeatMap
map.plugin(['AMap.HeatMap'], function() {
const heatmap = new AMap.HeatMap(map, {
radius: 25, // 每个点的覆盖范围半径,单位是像素
opacity: [0, 0.8],
gradient: {
0.3: 'blue',
0.5: 'green',
0.7: 'yellow',
0.9: 'red'
}
})
This.heatMao = heatmap
//设置数据集:该数据为自定义假数据
var heatmapData = [
{ lng: '116.012743', lat: '31.754593', count: 8 },
//我这里定义了至少一两百行的数据,因为要的就是假数据,所以我自己在高德坐标拾取中自己找的经纬度,文章末尾贴了链接
]
This.heatMaoList = heatmapData
This.heatMao.setDataSet({
data: This.heatMaoList, // 加载数据一节中,可以自定义js文件,js文件内保存所有数据的变量。也可以直接像我这样在方法中定义数组
max: 10 // 见gradient的例子
})
})
map.setDefaultCursor('crosshair')
this.map = map
this.AMap = AMap
},
高德坐标拾取链接:高德坐标拾取